HTML Tables

Information on the web frequently needs to be organized into grids of rows and columns, similar to a spreadsheet. Think of a financial report, a product comparison chart, or a daily schedule. HTML provides a dedicated set of tags specifically for structuring this type of tabular data.

The Core Table Elements

Building a table is like assembling blocks. You start with the main container, divide it into rows, and then chop those rows into individual cells.

• <table>: The outer wrapper. Everything inside is part of the table grid.
• <tr> (Table Row): Acts as a horizontal slice across the table.
• <th> (Table Header): Special cells that act as titles for columns or rows. Browsers usually make these bold and centered automatically to make them stand out.
• <td> (Table Data): The standard cells where your actual content goes. These can hold entirely formatted HTML, not just text! (Images, links, or even nested tables).

Constructing a Basic Grid

To see how these pieces fit together, let's create a simple scoreboard for a game.

<!-- The parent container -->
<table>

  <!-- Row 1: The Headings -->
  <tr>
    <th>Player Name</th>
    <th>Score</th>
    <th>Status</th>
  </tr>

  <!-- Row 2: Data for Player 1 -->
  <tr>
    <td>Alice</td>
    <td>2500</td>
    <td>Active</td>
  </tr>

  <!-- Row 3: Data for Player 2 -->
  <tr>
    <td>Bob</td>
    <td>1850</td>
    <td>Eliminated</td>
  </tr>

</table>