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

Name	Level	Section	Student 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

Name	Level	Section	Student Number
Bob	Level 1	010	040123456

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

Name	Level	Section	Student Number
Bob	Level 1	010	040123456
Fran	Level 1	020	040234567

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>

Name	Scores
	Maths	English
Bob	10/10	9/10
Fran	8/10	10/10

This YouTube video was created by Steve Griffith.