HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Example

<table class="ws-table-all" id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

<table>

<tr>
    <th>Company</th>

    <th>Contact</th>
    <th>Country</th>

</tr>

<tr>
    <td>Alfreds Futterkiste</td>

    <td>Maria
  Anders</td>
    <td>Germany</td>

</tr>
  <tr>
    <td>Centro
  comercial Moctezuma</td>

    <td>Francisco
  Chang</td>
    <td>Mexico</td>

  </tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

Note: td stands for table data.

Everything between <td> and </td> is the content of a table cell.

Example

<table>

<tr>
    <td>Emil</td>

    <td>Tobias</td>
    <td>Linus</td>

</tr>
</table>

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

Note: tr stands for table row.

Example

<table>

<tr>
    <td>Emil</td>

    <td>Tobias</td>
    <td>Linus</td>

</tr>

<tr>
    <td>16</td>

    <td>14</td>
    <td>10</td>

</tr>
</table>

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have fewer or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

Note: th stands for table header.

Example

<table>

<tr>
    <th>Person 1</th>

    <th>Person 2</th>
    <th>Person
  3</th>

</tr>

<tr>
    <td>Emil</td>

    <td>Tobias</td>
    <td>Linus</td>

</tr>

<tr>
    <td>16</td>

    <td>14</td>
    <td>10</td>

</tr>
</table>

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

HTML Table Tags