HTML Tables

A guide to understanding how to use tables in HTML, including table rows, headers, cells, and advanced features like colspan and rowspan.

📊 In this guide, we will explore key HTML table elements, their structure, and advanced features like colspan, rowspan, and table styling.

HTML tables are used to display data in a structured way using rows and columns. Here's how you can create and style tables in HTML:

📋 Basic Table Structure

The basic structure of an HTML table involves the following tags:

🗂️ <table>: This is the container for the table.
🏷️ <tr>: Defines a table row.
🏷️ <th>: Represents a table header cell (usually bold and centered).
🏷️ <td>: Represents a table data cell (where content is displayed).

🛠️ Example:

<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>

➕ colspan and rowspan

You can merge table cells using colspan and rowspan attributes.

➡️ colspan: Spans a cell across multiple columns.
⬇️ rowspan: Spans a cell across multiple rows.

🛠️ Example:

<table>
  <tr>
    <th colspan="2">Header spanning 2 columns</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Cell spanning 2 rows</td>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

🗂️ Table Sections: `<thead>`, `<tbody>`, `<tfoot>`

HTML5 introduced sections to structure tables for better readability and accessibility:

🏷️ <thead>: Contains the header row.
🏷️ <tbody>: Contains the main data rows.
🏷️ <tfoot>: Contains the footer row (often for totals or summaries).

🛠️ Example:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Data 1</td>
      <td>Row 1, Data 2</td>
      <td>Row 1, Data 3</td>
    </tr>
    <tr>
      <td>Row 2, Data 1</td>
      <td>Row 2, Data 2</td>
      <td>Row 2, Data 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
    </tr>
  </tfoot>
</table>

🎨 Table Borders and Styling

By default, HTML tables are plain. You can style them using CSS.

🛠️ Example:

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

HTML tables are a powerful way to display structured data on webpages. By using basic elements like <table>, <tr>, <th>, and <td>, along with colspan and rowspan, you can build complex, readable tables.

💡 Pro Tip: Always use <thead>, <tbody>, and <tfoot> for better table structure and accessibility.

HTML Tables

📋 Basic Table Structure

🛠️ Example:

➕ colspan and rowspan

🛠️ Example:

🗂️ Table Sections: `<thead>`, `<tbody>`, `<tfoot>`

🛠️ Example:

🎨 Table Borders and Styling

🛠️ Example:

🧪 Try Yourself

✅ Conclusion

📚 Resources

📄 Learn HTML Tables

🎨 CSS Table Styling

On this page