HTML Tables

Tables (<table>) display structured data on web pages. Built from rows (<tr>) and cells (<td> / <th>), they are the standard choice for schedules, pricing tables, data reports, and similar content.

Basic Table Structure

A minimal table requires at least a <table>, rows (<tr>), and data cells (<td>):

HTML

<table border="1" width="100%">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

▶ Try It Yourself

Common Table Attributes

You can add basic attributes to <table> and <td> to control appearance — however, note that most of these are deprecated in HTML5, and CSS is the recommended replacement. But understanding them as a beginner helps grasp how tables are rendered:

HTML

<table border="1" width="100%">
  <tr>
    <th align="left">Name</th>
    <th width="60%">Bio</th>
  </tr>
  <tr>
    <td valign="top">Alice</td>
    <td>Frontend Developer</td>
  </tr>
</table>

▶ Try It Yourself

Attribute	Purpose	CSS Replacement
`border`	Sets table border (e.g. `border="1"`)	`CSS border`
`width`	Table or cell width	`CSS width`
`align`	Horizontal alignment (left / center / right)	`CSS text-align`
`valign`	Vertical alignment (top / middle / bottom)	`CSS vertical-align`

⚠️ Important Note: The above attributes (border, width, align, valign) are deprecated in HTML5. While border="1" is still supported by browsers, it's only for backward compatibility with legacy code. In real projects, use CSS to control table styling — for example, properties like border, text-align, and vertical-align. This site has table styles pre-configured in style.css, so you can see neat borders without border="1".

Cell Merging

Use colspan to merge columns horizontally and rowspan to merge rows vertically:

HTML

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Contact Info</th>
  </tr>
  <tr>
    <td rowspan="2">Alice</td>
    <td>Email</td>
    <td>alice@mail.com</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>555-0000-0000</td>
  </tr>
</table>

▶ Try It Yourself

Semantic Table Structure

Beyond basic <table> and <tr>, HTML provides a set of semantic tags to organize the various parts of a table:

HTML

<table border="1">
  <caption>2026 Sales Report</caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>$100K</td><td>$20K</td></tr>
    <tr><td>Q2</td><td>$120K</td><td>$25K</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$220K</td><td>$45K</td></tr>
  </tfoot>
</table>

▶ Try It Yourself

<caption> Table caption, displayed above the table by default
<thead> Table header section, typically containing column heading rows
<tbody> Table body, containing the data rows
<tfoot> Table footer section, ideal for summaries or statistics

📖 Summary

<table> defines a table; <tr> rows; <th> headers; <td> data cells
<caption> table title; <thead> header; <tbody> body; <tfoot> footer
colspan merges cells horizontally; rowspan merges cells vertically
Never use tables for page layout (that's CSS's job); tables are only for displaying data

📝 Exercises

Class schedule: Use <table> to create a class schedule with headers (Monday through Friday) and at least 4 rows of classes.
Merging practice: Create a grade report with merged cells — the header has "Student Name" and "Subject Scores" (colspan covering Chinese, Math, and English columns).

← Previous: HTML Lists Next: HTML iframes →