HTML Tables – Learn How to Create Tables in HTML

Tables in HTML are used to organize data into rows and columns, making it easy to present information in a structured way.

Basic Structure of an HTML Table

An HTML table is defined using the <table> element. Rows are created with <tr> (table row), headers with <th> (table header), and data cells with <td> (table data).

Syntax

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Example

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>$1.00</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>$0.50</td>
    <td>7</td>
  </tr>
</table>

Result:

Product	Price	Quantity
Apples	$1.00	5
Bananas	$0.50	7

Key Elements of an HTML Table

<table>: Defines the table.
<tr>: Defines a row.
<th>: Defines a header cell; content is bold and centered by default.
<td>: Defines a data cell.

Adding a Caption

The <caption> element adds a title to the table.

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
</table>

Spanning Columns and Rows

colspan: Merges multiple columns.
```
<td colspan="2">Merged Columns</td>
```

rowspan: Merges multiple rows.

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

Example

<table border="1">
  <tr>
    <th>Product</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>Price</td>
    <td>Quantity</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>$0.50</td>
    <td>7</td>
  </tr>
</table>

Styling Tables with CSS

Tables can be styled using CSS to improve readability and aesthetics.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

Adding Borders and Padding

Use CSS to control the spacing and borders of table elements.

<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th style="padding: 10px;">Header</th>
    <th style="padding: 10px;">Header</th>
  </tr>
</table>

Responsive Tables

For mobile-friendly tables, use CSS to make them responsive.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    padding: 8px;
    text-align: left;
  }
  @media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    td {
      text-align: right;
    }
    td:before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
    }
  }
</style>

Best Practices

Use <th> for Headers: Clearly define headers for better readability and accessibility.
Keep it Simple: Avoid overcomplicating table structures.
Provide Captions: Use <caption> to describe the table’s purpose.
Ensure Accessibility: Use scope attributes on <th> elements for better screen reader support.

Example: Full HTML Table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Example</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h1>Product List</h1>
  <table>
    <caption>Product and Pricing Table</caption>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>Apples</td>
      <td>$1.00</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>$0.50</td>
      <td>7</td>
    </tr>
  </table>
</body>
</html>

Try It Now

Result:

Product List

Product and Pricing Table
Product	Price	Quantity
Apples	$1.00	5
Bananas	$0.50	7

HTML tables are a powerful tool for presenting structured data. By mastering the use of rows, columns, and headers, along with styling options, you can create informative and visually appealing tables for your website.