HTML Tables

📚 Lesson 11 of 25 • ⏱ 12 min read • Beginner

Basic Table Structure

A table is built with rows (<tr>) and cells. Header cells use <th>, data cells use <td>:

HTML

<table>
  <tr>
    <th>Name</th>
    <th>Department</th>
    <th>CGPA</th>
  </tr>
  <tr>
    <td>Mohan</td>
    <td>CSE</td>
    <td>8.5</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>ECE</td>
    <td>9.1</td>
  </tr>
</table>

Semantic Table Structure

For proper accessibility and SEO, use <thead>, <tbody>, and <tfoot>:

HTML

<table>
  <caption>Anna University Student Results</caption>

  <thead>
    <tr>
      <th scope="col">Register No.</th>
      <th scope="col">Subject</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>211701001</td>
      <td>Web Technology</td>
      <td>O</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">CGPA</td>
      <td>8.5</td>
    </tr>
  </tfoot>
</table>

colspan and rowspan

Merge cells horizontally with colspan, vertically with rowspan:

HTML

<table>
  <tr>
    <th colspan="3">Semester 1 Results</th>  <!-- spans 3 columns -->
  </tr>
  <tr>
    <th>Subject</th>
    <th>Internal</th>
    <th>External</th>
  </tr>
  <tr>
    <td rowspan="2">Maths</td>  <!-- spans 2 rows -->
    <td>45</td>
    <td>72</td>
  </tr>
</table>

Styling Tables with CSS

CSS

table {
  width: 100%;
  border-collapse: collapse;   /* removes double borders */
  font-size: 0.95rem;
}
th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
th {
  background: #6c63ff;
  color: white;
}
tr:hover {
  background: #f5f5f5;
}

← Lists Next: Semantic Elements →