Building Data Tables in HTML

Tables allow you to arrange data—like text, images, and links—into rows and columns. While tables were used for layouts in the past, today they are strictly used for displaying tabular data.

1. The Core Table Tags

<table>: The main container for the entire table.
<tr>: Defines a Table Row.
<th>: Defines a Table Header (Standardized as bold and centered).
<td>: Defines Table Data (The actual cell content).

2. Basic Table Example

A simple table consists of a header row followed by multiple data rows.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Omii</td>
    <td>Developer</td>
  </tr>
</table>

3. Advanced: Merging Cells

Sometimes you need a cell to span across multiple columns or multiple rows. This is done using Colspan and Rowspan.

Colspan: Use colspan="2" to merge two columns horizontally.

Rowspan: Use rowspan="2" to merge two rows vertically.

Example: Merged Header

<table border="1">
  <tr>
    <th colspan="2">Contact Details</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>crabylab01@gmail.com</td>
  </tr>
</table>

4. Table Sections (Thead, Tbody, Tfoot)

For large data sets, it is better to group your rows. This helps browsers scroll through data independently of the header.

<thead>: Wraps the header content.
<tbody>: Wraps the main body of the table.
<tfoot>: Wraps the footer/summary row at the bottom.

Feature	Description
Accessibility	Using `<th>` helps screen readers read data correctly.
Border Collapse	CSS `border-collapse: collapse;` makes tables look clean.