HTML Tables

HTML tables are essential tools for developers when they need to organize complex data into a readable format of rows and columns. Whether you are building a financial dashboard, a price list, or a sports leaderboard, tables provide the structure needed to make data digestible for users.

Creating a Basic Table

To build a table, you use a combination of several nested elements. Think of the <table> tag as the container. Inside, you stack <tr> (Table Row) tags vertically. Within each row, you place your data cells using either <th> for headers or <td> for standard data.

• <tr>: Defines a single row.
• <th>: Used for header cells. By default, browsers display these as bold and centered.
• <td>: Used for "Table Data" cells. These hold the actual content of your table.

Basic Syntax

<table>
  <tr>
    <th>Employee Name</th>
    <th>Role</th>
    <th>Location</th>
  </tr>
  <tr>
    <td>Sarah Jenkins</td>
    <td>Lead Developer</td>
    <td>Remote</td>
  </tr>
  <tr>
    <td>Mark Thompson</td>
    <td>UI Designer</td>
    <td>London</td>
  </tr>
</table>

Output:

Adding a Caption

The <caption> tag acts like a title for your table. It helps users quickly identify what the data is about before they dive into the rows.

<table>
  <caption>Monthly Sales Revenue</caption>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$12,000</td>
  </tr>
</table>

Output:

Table Headers

For more complex tables, it's best to use semantic tags like <thead>, <tbody>, and <tfoot>. These don't change the look of the table by default, but they provide a clear structure that browsers and CSS can use.

• <thead>: Wraps the header rows.
• <tbody>: Wraps the main data content.
• <tfoot>: Wraps footer content, like totals or summaries.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>$10</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>$20</td>
      <td>1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td colspan="2">$40</td>
    </tr>
  </tfoot>
</table>

Output:

Merging Cells

Sometimes you need a cell to span across multiple columns or multiple rows. This is done using the colspan and rowspan attributes.

Column Span

Use colspan when you want a single cell to stretch horizontally across multiple columns.

<table>
  <tr>
    <th colspan="2">Contact Info</th>
    <th>ID</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>Phone</td>
    <td>001</td>
  </tr>
</table>

Output:

Row Span

Use rowspan when you want a cell to stretch vertically across multiple rows. This is common when one category applies to several data points.

<table>
  <tr>
    <th>Category</th>
    <th>Item</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td rowspan="2">Fruit</td>
    <td>Apples</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>20</td>
  </tr>
</table>

Output:

Styling Tables

Plain HTML tables look very basic. To make them professional, we use CSS. One of the most important properties is border-collapse: collapse;, which merges double borders into single, clean lines.

<style>
  table {
    width: 100%;
    border-collapse: collapse; /* Essential for clean borders */
    font-family: Arial, sans-serif;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping */
  }
</style>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Output:

Summary

HTML tables (<table>) are the correct way to present structured data. By mastering the core elements—rows, header cells, and standard cells—you can build everything from simple lists to complex financial reports. Remember to use thead and tbody for better structure, and always apply border-collapse in your CSS to keep your tables looking sharp and professional.