HTML Tables

HTML tables are used to organize data into rows and columns, making it easy to display structured information.

Creating a Basic Table

A basic HTML table is created using the <table> element. Inside the table, rows are defined with the <tr> tag, and each cell within a row is defined with either <th> (for header cells) or <td> (for standard cells).

Basic Syntax

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

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Adding a Caption

You can add a caption to a table using the <caption> tag.

<table>
  <caption>Table Caption</caption>
  <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:

Table Caption

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Table Headers

The <thead> element groups header content, <tbody> groups body content, and <tfoot> groups footer content.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
</table>

Output:

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Footer 1	Footer 2	Footer 3

Merging Cells

Cells can span multiple rows or columns using the rowspan and colspan attributes.

Column Span

<table>
  <tr>
    <th colspan="2">Header 1 and 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td colspan="2">Data 1 and 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Output:

Header 1 and 2	Header 3
Data 1 and 2	Data 3
Data 4	Data 5

Row Span

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
  </tr>
</table>

Output:

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
	Data 4	Data 5

Styling Tables

Tables can be styled using CSS to enhance their appearance.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  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>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Output:

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

 

Summary

HTML tables (<table>) provide a structured way to display data using rows and columns. You can enhance tables with captions, headers, footers, and styling, as well as merge cells using rowspan and colspan. Understanding these elements and attributes allows you to create clear and organized data presentations on your web pages.