HTML5 Tables

What is an HTML table?

An HTML table is used to display data in rows and columns, just like a spreadsheet or a table on paper.

Tables are created using <table> tag, with rows created using <tr>, and data cells inside rows using <td>.

You can also use <th> for header cells.

Tag	Meaning
`<table>`	The container for the whole table.
`<tr>`	Table row (creates a new horizontal line).
`<th>`	Table header cell (bold + centered by default).
`<td>`	Table data cell (normal cell).

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

Adding some style

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }
  th, td {
    border: 1px solid #999;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>$1.50</td>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>$2.00</td>
  </tr>
</table>

HTML5 Tables

What is an HTML table?

Adding some style

On this page