HTML Tables

PreviousNext

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

Example

CompanyContactCountryAlfreds FutterkisteMaria AndersGermanyCentro comercial MoctezumaFrancisco ChangMexicoErnst HandelRoland MendelAustriaIsland TradingHelen BennettUKLaughing Bacchus WinecellarsYoshi TannamuriCanadaMagazzini Alimentari RiunitiGiovanni RovelliItaly

Try it Yourself »

Define an HTML Table

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

Example

A simple HTML table:

<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>

Try it Yourself »

Table Cells

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

td stands for table data.

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

Example

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Try it Yourself »

Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

ADVERTISEMENT

Table Rows

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

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>

Try it Yourself »

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 where a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag:

Example

Let the first row be table headers:

<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>

Try it Yourself »

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

HTML Exercises

Test Yourself With Exercises

Exercise:

Add a table row with two table headers.

The two table headers should have the value "Name" and "Age".

<table>
  
    
    
  
  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>

Submit Answer »

Start the Exercise

HTML Table Tags

TagDescription<table>Defines a table<th>Defines a header cell in a table<tr>Defines a row in a table<td>Defines a cell in a table<caption>Defines a table caption<colgroup>Specifies a group of one or more columns in a table for formatting<col>Specifies column properties for each column within a <colgroup> element<thead>Groups the header content in a table<tbody>Groups the body content in a table<tfoot>Groups the footer content in a table