HTML Tables

Tables are used to display data in a structured format using rows and columns. They are ideal for organizing information such as schedules, price lists, comparison charts, and reports.

Basic Table Structure

A basic HTML table is built using the following tags:

Tag	Purpose
`<table>`	Defines the table container
`<tr>`	Defines a table row
`<th>`	Defines a header cell (bold and centered by default)
`<td>`	Defines a regular data cell

Simple Table Example

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>28</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>35</td>
    <td>London</td>
  </tr>
</table>

Table with Head, Body, and Footer

For better structure and accessibility, a table can be divided into three semantic sections:

<thead> – Contains the header row(s)
<tbody> – Contains the main data rows
<tfoot> – Contains the footer row(s) (e.g., totals or summaries)

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook</td>
      <td>2</td>
      <td>$5.00</td>
    </tr>
    <tr>
      <td>Pen</td>
      <td>5</td>
      <td>$1.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Total</strong></td>
      <td>7</td>
      <td>$10.00</td>
    </tr>
  </tfoot>
</table>

Merging Cells

Colspan – Merging Columns

The colspan attribute makes a cell span across multiple columns horizontally.

<table border="1">
  <tr>
    <th colspan="3">Student Report Card</th>
  </tr>
  <tr>
    <th>Subject</th>
    <th>Marks</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Mathematics</td>
    <td>88</td>
    <td>A</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>75</td>
    <td>B</td>
  </tr>
</table>

Rowspan – Merging Rows

The rowspan attribute makes a cell span across multiple rows vertically.

<table border="1">
  <tr>
    <th>Day</th>
    <th>Time</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td rowspan="2">Monday</td>
    <td>9:00 AM</td>
    <td>Mathematics</td>
  </tr>
  <tr>
    <td>11:00 AM</td>
    <td>English</td>
  </tr>
</table>

Table Caption

The <caption> tag adds a title or description above the table. It is placed immediately after the opening <table> tag.

<table border="1">
  <caption>Monthly Sales Report – January 2025</caption>
  <tr>
    <th>Region</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>North</td>
    <td>$12,000</td>
  </tr>
  <tr>
    <td>South</td>
    <td>$9,500</td>
  </tr>
</table>

Table Attributes

Attribute	Tag Used On	Purpose
`border`	`<table>`	Adds a visible border around cells
`cellpadding`	`<table>`	Space between cell content and border
`cellspacing`	`<table>`	Space between cells
`colspan`	`<td>`, `<th>`	Merges cell across columns
`rowspan`	`<td>`, `<th>`	Merges cell across rows
`width`	`<table>`, `<td>`	Sets width of table or cell

Key Points to Remember

Tables are built using <table>, <tr>, <th>, and <td> tags
Use <thead>, <tbody>, and <tfoot> for semantic structure
colspan merges cells horizontally; rowspan merges cells vertically
The <caption> tag gives the table a title
Tables should only be used for tabular data, not for page layout
Use the border attribute to see cell borders during development

Previous lessons

Back to courses

Next lessons