Learning Code

Tables

A table is intended to organize data in a spreadsheet format where cells of information are placed in rows and columns. Sometimes tables are used to create the layout for a page but that was never the purpose.

Table Elements

  • table is the parent element
  • tr (short for table row) is inside (a child) of the table element
  • th (short for table header) is placed inside (a child) of the tr element and is used to give a title/heading to a column
  • td (short for table data; also called a cell) is placed inside (a child) of the tr element and contains the actual content for the table

A Basic Table

This is a single cell in a basic table
<table border="1">
   <tr>
       <td>This is a single cell in a basic table </td> </tr>
</table>

The table and cell sizes are based upon the amount of content.To set a specific size, you can add the style attribute and add width and/or height just like with an image.

A temporary border attribute has been placed in the opening table tag. This makes the table structure more obvious. This is deprecated code that should only be used for testing. To add a permanent border, use CSS instead.

Columns and Rows

Tables can have multiple columns and/or multiple rows.
This is a heading
This cell is on the leftThis cell is on the right
<table border="1">
   <tr>
       <th>This is a heading </th> </tr>
   <tr>
       <td>This cell is on the left </td>
       <td>This cell is on the right </td> </tr>
</table>

Placing multiple td in a single row creates multiple columns. Placing multiple tr in the table creates multiple rows. Notice that if one row has more cells than the other(s), the other rows make space for the additional column(s).

Colspan Attribute

Short for column span, colspan allows a single cell to take the space of multiple columns.
This is a heading
This cell is on the leftThis cell is on the right
<table border="1">
   <tr>
       <th colspan="2">This is a heading </th> </tr>
   <tr>
       <td>This cell is on the left </td>
       <td>This cell is on the right </td> </tr>
</table>

Colspan is placed in the opening tag of either th or td. The number should equal the number of columns the cell should span across.

Rowspan Attribute

A combination of row + span, rowspan allows a single cell to span across multiple rows.
This is a heading
LeftRight
Left
<table border="1">
   <tr>
       <th colspan="2">This is a heading </th> </tr>
   <tr>
       <td>Left </td>
       <td rowspan="2">Right </td> </tr>
   <tr>
       <td>Left </td>
       </tr>
</table>

Rowspan is placed in the opening tag of either th or td. Rows only span down - trying to add rowspan to a cell in a lower row will not make it span upward. The number should equal the number of rows the cell should span across.

Table Nesting

More complex arrangements can be created by placing an entire table inside the cell (td) of another table.
This is a heading
Left
12
Left
<table border="1">
   <tr>
       <th colspan="2">This is a heading </th> </tr>
   <tr>
       <td>Left </td>
       <td rowspan="2">
          <table>
             <tr>
                 <td>1</td><td>2</td>
             </tr>
          </table>

       </td> </tr>
   <tr>
       <td>Left </td>
       </tr>
</table>

Captions

This is a caption.
This is a single cell
<table border="1">
   <caption> This is a caption. </caption>
   <tr>
       <td>This is a single cell </td> </tr>
</table>

The caption element can be added just after the opening table tag or just before the closing table tag. Captions display at the top of the table.

Can you use the Try-it Editor to try out these concepts?