Building Tables

Building Tables#

HTML uses a few core tags for web pages that include tables.

  • table (marks the start and end of a table

  • tbody (marks the start and end of the table body)

  • tr (marks the start and end of each table row)

  • th (marks the start and end of each column in the first row of the table)

  • td (marks the start and end of each column after the first row of the table)

Example#

How we might see those tags combined in a table structure:

<table>
 <tr>
  <th>First Column Header</th>
  <th>Second Column Header</th>
  <th>Third Column Header</th>
 </tr>
 <tr>
  <td>Data in first column/first row</td>
  <td>Data in second column/first row</td>
  <td>Data in third column/first row</td>
 </tr>
 <tr>
  <td>Data in first column/second row</td>
  <td>Data in second column/second row</td>
  <td>Data in third column/second row</td>
 </tr>
</table>

The output of that HTML would look like:

First Column Header Second Column Header Third Column Header
Data in first column/first row Data in second column/first row Data in third column/first row
Data in first column/second row Data in second column/second row Data in third column/second row

Additional Resources#

Additional attributes like align, style, etc. can be used with many of these tags. For more on building tables in HTML:

Application#

Add a table to one of your HTML pages (index.html or page2.html). You could create fictional data or add meaningful data from another source.

Contents