1. HTML Tables

Tables organize data into rows and columns.

Basic Table Structure

sample code:

<table>
  <tr> <!-- Table Row -->
    <th>Name</th> <!-- Table Header -->
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td> <!-- Table Data -->
    <td>25</td>
  </tr>
</table>

Table Elements

Advanced Features

The full table structure looks as follows:

<table>
  <caption>Table Title</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

Merging Cells.

sample code:

<!-- Column span (merge columns) -->
<td colspan="2">Merged Cells</td>

<!-- Row span (merge rows) -->
<td rowspan="2">Merged Rows</td>

Some tips to use while styling:

• Always use <th> for headers (better for accessibility)

• Add borders with CSS: table, th, td { border: 1px solid
black; }