HTML Tables

Tables are useful for displaying data, like a schedule, timetable or spreadsheet. Tabular data can be a simple or complex sets of organized content.

At one point, it was common practice to use HTML tables for layout. In fact, the majority of email clients still rely on tables for layout. HTML and CSS have progressed along way since then and it is highly discouraged to use HTML tablesopen in new window for anything other than tabular data now.

The tags used in tables include:

  • <table></table> - the table container
  • <caption></caption> - the label/description for a table
  • <thead></thead> - the header area of the table
  • <tbody></tbody> - the body of the table
  • <tr></tr> - table row
  • <th></th> - table heading cell
  • <td></td> - table data cell (most common tag)

Table container

To add a table to the page we start wih the <table></table> tag, all the data to be displayed as part of the table is added inside the opening <table> and closing </table> tags.

<table>
  <!-- All the table data added here in proper tags -->
</table>

Table caption

Every table can have a caption, this summarizes the data in the table. The caption can be added to the table by using the <caption></caption> paired tag.

<table>
  <caption>Student Information</caption>
</table>
Student Information

Table header

The header of the table is used to add a heading row for the table columns. This is where we add labels for the data being displayed. Using the <thead></thead> tag

Table Rows

We add rows of data to the table using the <tr></tr> tag for each row. Starting from the first row added inside the <thead></thead>

Table heading cell

The table heading cell tag <th></th> defines the heading cell. We add the heading cells inside the table rows.

<table>
  <caption>Student Information</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Level</th>
      <th>Section</th>
      <th>Student Number</th>
    </tr>
  </thead>
</table>


 
 
 
 
 
 
 
 

Student Information
NameLevelSectionStudent Number

Table body

The data being displayed under each heading is added inside the table body tag <tbody></tbody>. With each row of data is added in its own table row tag <tr></tr>

Table data cell

The <td></td> tag represents the data cell in the table. the table data cells are adding inside the table row tags for each piece of data.

<table>
  <caption>Student Information</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Level</th>
      <th>Section</th>
      <th>Student Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td>Level 1</td>
      <td>010</td>
      <td>040123456</td>
    </tr>
  </tbody>
</table>










 
 
 
 
 
 
 
 

Student Information
NameLevelSectionStudent Number
BobLevel 1010040123456

Now if we have another student information that will be another row of data to be added in the body of the table.

<table>
  <caption>Student Information</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Level</th>
      <th>Section</th>
      <th>Student Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td>Level 1</td>
      <td>010</td>
      <td>040123456</td>
    </tr>
    <tr>
      <td>Fran</td>
      <td>Level 1</td>
      <td>020</td>
      <td>040234567</td>
    </tr>
  </tbody>
</table>

















 
 
 
 
 
 


Student Information
NameLevelSectionStudent Number
BobLevel 1010040123456
FranLevel 1020040234567

Merging cells

We can merge the adjacent cells in columns or rows by controlling the number of columns and rows each table data cell in the table takes up using the colspan and rowspan attributes.

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th colspan="2">Scores</th>
    </tr>
    <tr>
      <th>Maths</th>
      <th>English</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td>10/10</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>Fran</td>
      <td>8/10</td>
      <td>10/10</td>
    </tr>
  </tbody>
</table>



 
 



















NameScores
MathsEnglish
Bob10/109/10
Fran8/1010/10

This YouTube video was created by Steve Griffith.