Tables

Tables in HTML (<table>) organize data into rows (<tr>) and columns (<td>/<th>), allowing structured presentation with optional styling and formatting using CSS.

Tables in HTML

HTML tables help present data in a structured format using rows and columns. The <table> element defines the table, while its child elements organize its structure.

Basic Table Structure

<table>: Declares a table.
<tr> (Table Row): Creates a row.
<th> (Table Header): Represents a header cell (bold and centered by default).
<td> (Table Data): Represents a standard data cell.

Example

Name	Age
Alice	25
Bob	30

index.html

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

Basic Structure of an HTML Table

Table Caption
Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Footer Row

index.html

<table>
  <caption>
    Table Caption
  </caption>
  <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>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Footer Row</td>
    </tr>
  </tfoot>
</table>

Table Cells

Each cell within a table is defined using the <td> tag.

The <td> tag represents standard table data.

Emil

Tobias

Linus

index.html

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

A table cell can include text, images, lists, links, or even another table.

Table Row

A table row starts with <tr> and ends with </tr>.

Emil	Tobias	Linus
16	14	10

index.html

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Table Headers

Use the <th> tag for header cells instead of <td>.

ID	Name	Department
001	John Doe	IT
Total Employees: 1

index.html

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>IT</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total Employees: 1</td>
    </tr>
  </tfoot>
</table>

Table with Caption

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

Student Information
Name	Grade
John	A

index.html

<table border="1">
  <caption>Student Information</caption>
  <tr>
    <th>Name</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>John</td>
    <td>A</td>
  </tr>
</table>

Conclusion

HTML tables provide a structured way to display data. Proper use of <th>, <td>, and formatting enhances readability and accessibility.

<menu>

The `<menu>` element lists commands or options but is mostly obsolete, with better semantic alternatives available.

<table>

The `<table>` element structures data into rows (`<tr>`) and columns (`<td>`/`<th>`), with optional `<thead>` and `<tfoot>` for better organization.