Table

HTML tables (<table>) arrange data into rows (<tr>) and columns. Header cells (<th>) and data cells (<td>) work together to provide a structured layout.

HTML Table

HTML tables are used to arrange data in a grid-like structure, which is ideal for displaying information such as product catalogs, timetables, or financial data.

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 in a table is created using the <td> tag.

The <td> tag is used for representing data within a table cell.

Emil

Tobias

Linus

index.html

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

A table cell can contain different HTML elements such as text, images, lists, links, or even other tables.

Table Rows

Every table row is enclosed by the <tr> tag.

The <tr> tag denotes a row in the table.

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>

Ensure each row contains an equal number of cells for consistent data presentation.

At times, a row may include more or fewer cells than others, which can be achieved with the colspan or rowspan attributes to merge cells across columns or rows.

Key Tags

<table>: Represents the table structure.
<thead>, <tbody>, <tfoot>: Group the header, body, and footer sections.
<tr>: Denotes a row within the table.
<th>: A header cell within the table.
<td>: A data cell within the table.
colspan, rowspan: Used to control cell spanning across columns or rows.

Table Headers

In some cases, certain cells need to serve as table headers. To achieve this, the <th> tag is used in place of the <td> tag.

The <th> tag is used to mark a header cell.

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>

Best Practices

Group the content of the table into sections using <thead>, <tbody>, and <tfoot>.
Use <th> for header cells and <td> for data cells. Utilize the colspan and rowspan attributes when necessary.

Tables are a powerful way to structure data, making your content both easy to read and visually organized.

HTML Table Tags

Tag	Description
`<table>`	Defines a table
`<th>`	Specifies a header cell in a table
`<tr>`	Specifies a row in a table
`<td>`	Defines a data cell in a table
`<caption>`	Provides a caption for the table
`<colgroup>`	Groups one or more columns within a table for formatting purposes
`<col>`	Sets properties for individual columns within a `<colgroup>` element
`<thead>`	Defines the header content in a table
`<tbody>`	Defines the body content of a table
`<tfoot>`	Specifies the footer content in a table

HTML tables are a structured way to display data in rows and columns. Key elements like <thead>, <tbody>, and <tfoot> help group the table’s content for better accessibility and readability. Using <th> for headers and <td> for data cells, along colspan and rowspan, allows for flexible and organized data presentation.

Links

HTML links, created using the <a> tag, connect different web pages. The href attribute specifies the target URL. Links can include text, images, or other clickable elements.

Head

The HTML <head> element contains meta-information such as the page (<title>), character encoding (<meta>), and links to stylesheets and scripts, not visible on the page.