HTML Tables (table, tr, th, td)

Table Elements

<table>: the table container
<tr>: a table row
<th>: a header cell (use for column/row headings)
<td>: a normal data cell
<caption>: a title/summary for the table (helps accessibility)
<thead>, <tbody>: group header rows and body rows (clean structure)

Accessibility Tip

Use <th scope="col"> for column headings and scope="row" for row headings.
Add a <caption> to describe what the table is about.

Table Example

HTML Table Examplehtml

<!-- A table is used for tabular data (rows & columns) -->
<table>
  <caption>Weekly Study Plan</caption>

  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Topic</th>
      <th scope="col">Minutes</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Mon</td>
      <td>HTML</td>
      <td>45</td>
    </tr>
    <tr>
      <td>Tue</td>
      <td>CSS</td>
      <td>45</td>
    </tr>
    <tr>
      <td>Wed</td>
      <td>JavaScript</td>
      <td>60</td>
    </tr>
  </tbody>
</table>

Preview

localhost:3000

Loading preview...

Best Practice: Use tables only for tabular data (rows/columns). Avoid using tables for page layout—use CSS for layout instead.