Tables

Tables are used to display grids with rows and columns. In the past websites were created entirely with tables and content. Nowadays tables should be used to display tabular data only as we have CSS now that does not require the use of tables to display all of the content.

<table>

The <table> tag is the main tag used to define a table in a document.

<tr>

The <tr> tag creates a new row in a table.

<td>

The <td> tag creates the data inside a cell.

This is an example of how these table tags are used:

this is the data in cell 1, row 1	this is the data in cell 2, row 1
this is the data in cell 3, row 2	this is the data in cell 4, row 2

This is what the HTML code looks like:

<table>
  <tr>
    <td>this is the data in cell 1, row 1</td>
    <td>this is the data in cell 2, row 1</td>
  </tr>
  <tr>
    <td>this is the data in cell 3, row 2</td>
    <td>this is the data in cell 4, row 2</td>
  </tr>
</table>

<caption>

The <caption> tag is used to create a caption inside a table. You can only have one caption per table and it must be place right after the beginning <table> tag.

<thead>

The <thead> tag is used to group header content in a table.

<th>

The <th> tag is used to create header content.

<tbody>

The <tbody> tag is used to group body content inside of a table.

<tfoot>

The <tfoot> tag is used to group the content inside of the table footer.

This is an example of how these tags are used in a table:

Table Caption

Column 1 Header	Column 2 Header
Footer cell 1	Footer cell 2
Cell 1 Row 1	Cell 2 Row 1
Cell 1 Row 2	Cell 2 Row 2
Cell 1 Row 3	Cell 2 Row 3

This is how the html code looks:

<table>
<caption>Table Caption</caption>
  <thead>
     <tr>
        <th>Column 1 Header</th>
        <th>Column 2 Header</th>
     </tr>
  </thead>
  <tfoot>
     <tr>
        <td>Footer cell 1</td>
        <td>Footer cell 2</td>
     </tr>
  </tfoot>
  <tbody>
     <tr>
        <td>Cell 1 Row 1</td>
        <td>Cell 2 Row 1</td>
     </tr>
     <tr>
        <td>Cell 1 Row 2</td>
        <td>Cell 2 Row 2</td>
     </tr>
     <tr>
        <td>Cell 1 Row 3</td>
        <td>Cell 2 Row 3</td>
     </tr>
  </tbody>
</table>

<colspan>

The <colspan> tag is used to span a column.

<rowspan>

The <rowspan> tag is used to span a row.

Here’s an example:

Cell 1 Header	Cell 2 Header
Row 1 Cell 1 takes up two cells
Row 2 Cell 1 takes up two cells also
Row 3 Cell 1	Row 3 Cell 2 takes up the below cell
Row 4 Cell 1

Here’s the HTML:

<table>
  <tbody>
    <tr>
      <th>Cell 1 Header</th>
      <th>Cell 2 Header</th>
    </tr>
    <tr>

      <td colspan="2">Row 1 Cell 1 takes up two cells</td>
    </tr>
    <tr>
      <td colspan="2">Row 2 Cell 1 takes up two cells also</td>
    </tr>
    <tr>
     <td>Row 3 Cell 1</td>
     <td rowspan="2">Row 3 Cell 2 takes up the below cell</td>
    </tr>
    <tr>
     <td>Row 4 Cell 1</td>
    </tr>
  </tbody>
</table>

 

Table Attributes

Cell Padding

cellpadding is an attribute for a table and defines the space inside of cells.

Cell Spacing

cellspacing is an attribute for a table and defines the space outside cells.

Width / Height

Width and height attributes specify the tables width and height just like an image.

Border

The border attribute defines the thickness of the outline in a table.

Take the quiz »