Why Use HTML Tables?

Think about a class schedule, a product comparison, or a list of monthly expenses. Sometimes information is easier to understand when it’s arranged into rows and columns.

That’s exactly what HTML tables are for: presenting data with meaningful relationships between rows and columns.

Meet the Table Elements

Every table starts with <table>. Inside it, you’ll build rows using <tr>, header cells using <th>, and regular data cells using <td>.

<table>
  <tr>
    <th>Name</th>
    <th>Favorite Language</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>Python</td>
  </tr>
</table>

Each <tr> creates a new row. The cells inside that row determine the columns. Your browser understands the structure even before you add CSS styling.

Give Your Table a Title and Headers

Tables become much easier to understand when readers know what the information represents.

Use <caption> for the table’s title and scope="col" or scope="row" to identify header relationships.

<table>
  <caption>Weekly Study Hours</caption>
  <tr>
    <th scope="col">Day</th>
    <th scope="col">Hours</th>
  </tr>
  <tr>
    <th scope="row">Monday</th>
    <td>2</td>
  </tr>
  <tr>
    <th scope="row">Tuesday</th>
    <td>3</td>
  </tr>
</table>

Meet the Head, Body, and Footer

For larger tables, HTML lets you group different sections with <thead>, <tbody>, and <tfoot>.

<table>
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Hours</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>3</td></tr>
    <tr><td>CSS</td><td>2</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>5</td></tr>
  </tfoot>
</table>

These sections make your code easier to read and maintain. They also give you useful hooks when styling tables with CSS.

Make Cells Span Rows or Columns

Sometimes a heading needs to stretch across multiple columns, or a category applies to several rows.

Use colspan to span columns and rowspan to span rows.

<table>
  <tr>
    <th colspan="2">My Learning Plan</th>
  </tr>
  <tr>
    <th scope="col">Day</th>
    <th scope="col">Topic</th>
  </tr>
  <tr><td>Monday</td><td>HTML</td></tr>
  <tr><td>Tuesday</td><td>CSS</td></tr>
</table>

Make Your Data Easier to Read

A little CSS can transform a plain table into something much more readable. Borders, spacing, alternating row colors, and hover effects all help.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #cbd5e1;
    padding: 12px;
    text-align: left;
  }
  thead {
    background: #dff7f4;
  }
  tbody tr:nth-child(even) {
    background: #f1f5f9;
  }
</style>

For narrow screens, put a wide table inside a container with overflow-x: auto so visitors can scroll horizontally without breaking the layout.

Build Tables Everyone Can Understand

Before publishing a table, ask yourself whether someone can understand the information quickly and navigate it easily.

• Use tables for data, not for page layout.
• Add a descriptive <caption> when it helps explain the table.
• Use real header cells and appropriate scope attributes.
• Group complex data logically with table sections.
• Use rowspan and colspan carefully; complex spanning can make tables harder to navigate.
• Allow wide tables to scroll on smaller screens.
• Keep data accurate, readable, and consistently formatted.

A well-structured table doesn’t just look organized. It makes information genuinely easier to use.