<table>

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

Table Tag

The <table> tag in HTML is used to create a structured table format, displaying data in rows and columns. Tables consist of multiple elements, including <thead>, <tbody>, <tfoot>, <tr> (table rows), <th> (table headers), and <td> (table data cells).

Syntax

index.html

<table>
  <!-- Optional table header -->
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <!-- Table body with rows -->
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
  <!-- Optional table footer -->
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

Example

Name	Age	City
Anna	28	London
Tom	34	Paris

index.html

<table border="1" cellpadding="5" cellspacing="3">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>28</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>34</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>

Table Cells

Each table cell is created using the <td> tag.

The <td> tag represents table data.

Emil

Tobias

Linus

index.html

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

A table cell can contain various elements such as text, images, lists, links, and even other tables.

Table Row

Each row in a table is defined using the <tr> tag.

<tr> represents a table row.

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>

A table row may have different numbers of cells using colspan or rowspan attributes.

Table Headers

Use the <th> tag instead of <td> to define table headers.

The <th> tag represents a table header.

Best Practices

Utilize <thead>, <tbody>, and <tfoot> for a well-structured table.
Use <th> for headers and <td> for data cells.
Leverage colspan and rowspan as needed.

Table with Caption

The <caption> tag adds a title to a 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>

Key Tags

<table>: Defines the table.
<th>: Header cell.
<tr>: Table row.
<td>: Data cell.
<caption>: Adds a caption to the table.
<thead>, <tbody>, <tfoot>: Organize table sections.

Conclusion

HTML tables are a powerful tool for organizing and displaying structured data. By using appropriate elements like <thead>, <tbody>, and <tfoot>, and by leveraging attributes such as colspan and rowspan, you can create clear and accessible tables that make your data more readable and interactive.

Tables

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

<tbody>

The HTML <tbody> element encapsulates the main body of a table, consisting of rows (<tr>) that hold the primary data, separate from the header (<thead>) and footer (<tfoot>) sections.