Tables Introduction

Tables are how you display data in rows and columns — schedules, pricing plans, comparison charts, you name it. HTML tables might look a bit intimidating at first with all those tags, but once you understand the pattern, they are actually very straightforward.

Building Your First Table

A table is built with three main tags: <table> wraps everything, <tr> defines a row, and <td> defines a cell inside that row. Headers use <th> instead of <td>.

<table>
  <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>34</td>
    <td>London</td>
  </tr>
</table>
    

Understanding the Structure

Think of a table as a grid. Each <tr> is a horizontal row. Inside each row, you put one <td> (or <th>) for every column. The number of cells in each row should match the number of columns. If they do not, your table will look misaligned.

Headers vs Data Cells

<th> stands for "table header." Browsers automatically make header text bold and centered. Use it for column titles or row labels. <td> is "table data" — the regular content. Most of your cells will be <td>.

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>In Stock</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
    <td>Yes</td>
  </tr>
</table>