Module 5: Table StructureIntermediate

18. Basic Structure of a Table (<table>, <tr>, <th>, <td>, <caption>)

The basic anatomy of Rows, Columns and header cells

Real-life analogy

Think of a school timetable or an Excel spreadsheet, where data is organised into lines and boxes.

Explanation

The sequence of 4 basic tags for building a table:

<table>: The main container of the table.
<caption>: The title of the table.
<tr>: Table Row (a horizontal line).
<th>: Header cell (Table Header - appears bold and centred automatically).
<td>: Data cell (Table Data - a normal cell).

Golden rules

Data must always be inside <td> or <th>, not directly in <tr>.

Common mistake

Not adding a border to the table or writing text directly inside a cell.

Example code

<!DOCTYPE html>
<html>
<head>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: sans-serif; font-size: 13px; }
    th, td { border: 1px solid #cbd5e1; padding: 8px; text-align: left; }
    th { background: #0f172a; color: white; }
    tr:nth-child(even) { background: #f8fafc; }
  </style>
</head>
<body style="padding: 10px;">
  <table>
    <caption style="font-weight: bold; margin-bottom: 6px; color: #047857;">Student Exam List</caption>
    <tr>
      <th>Roll No.</th>
      <th>Name</th>
      <th>Marks</th>
    </tr>
    <tr>
      <td>101</td>
      <td>Amit Sharma</td>
      <td>95%</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Priya Verma</td>
      <td>98%</td>
    </tr>
  </table>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which tag is used to make a heading cell in a table that makes text bold by default?

<td>
<tr-head>
<th>
<header>

Show answer

Answer: <th>

<th> (Table Header) automatically shows the text bold and centred.