Introduction

Tables in HTML let you display structured data such as schedules, pricing, statistics, lists, and more. The structure is simple but powerful: <table>, <tr>, <th>, and <td>.

Basic Table Structure

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>15</td>
  </tr>
</table>
      

Adding More Rows

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>$14</td>
  </tr>
  <tr>
    <td>Keyboard</td>
    <td>$39</td>
  </tr>
</table>
      

Styling Your Table

A simple example using CSS borders:

<style>
table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
  padding: 8px;
}
</style>
      

Creating a Header Section (thead)

<table>
  <thead>
    <tr>
      <th>Country</th>
      <th>Capital</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Germany</td>
      <td>Berlin</td>
    </tr>
    <tr>
      <td>Japan</td>
      <td>Tokyo</td>
    </tr>
  </tbody>
</table>
      

Column Span (colspan)

<td colspan="2">Full width cell</td>
      

Row Span (rowspan)

<td rowspan="2">Merged cell</td>
      

What's Next?

Now that you understand HTML tables, you can style them, add colors, create pricing layouts, comparison charts, and even make interactive tables using JavaScript.