Tables and Table Structure

Table Basics

HTML tables are used to display tabular data—information that naturally belongs in a grid of rows and columns, like a schedule, a pricing chart, or financial data.

The foundation of a table is the <table> element. Inside it, we build the table row by row.

Rows and Cells

Tables are constructed using three main tags:

• <tr> (Table Row): Defines a single horizontal row.
• <th> (Table Header): Defines a header cell (usually rendered bold and centered).
• <td> (Table Data): Defines a standard data cell.

Syntax / Structure

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>34</td>
  </tr>
</table>

Cell Spanning

Sometimes, you need a single cell to stretch across multiple columns or multiple rows. You can achieve this using the colspan and rowspan attributes.

Colspan (Column Span)

colspan makes a cell span across multiple columns horizontally.

<table>
  <tr>
    <!-- This header stretches across two columns -->
    <th colspan="2">Student Details</th>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>Grade A</td>
  </tr>
</table>

Rowspan (Row Span)

rowspan makes a cell span across multiple rows vertically.

<table>
  <tr>
    <th rowspan="2">Contact</th>
    <td>Email: jane@example.com</td>
  </tr>
  <tr>
    <!-- This cell is on the second row, but pushed over because of the rowspan above -->
    <td>Phone: 555-1234</td>
  </tr>
</table>

Try It Yourself

Try creating a simple schedule using an HTML table!

Key Takeaways

• Use <table> to create a table.
• Build tables horizontally using <tr> (table row).
• Inside rows, use <th> for headers and <td> for standard data.
• Use colspan to stretch a cell across columns.
• Use rowspan to stretch a cell across rows.
• Never use tables for general page layout.