Step 1: The <table> tag represents tabular data. Use <tr> for rows, <th> for header cells, <td> for data cells. Tables are for data in rows and columns—not for page layout. Use semantic structure: thead, tbody, tfoot, caption.
```
<table>
```
Step 2: Example: <table><tr><th>Name</th><th>Score</th></tr><tr><td>Alice</td><td>95</td></tr></table>. Use <thead> for header rows, <tbody> for body, <tfoot> for footer. <caption> gives the table a title (accessibility).
```
<table>
  <tr><th>Name</th><th>Score</th></tr>
  <tr><td>Alice</td><td>95</td></tr>
</table>
```
Step 3: Accessibility: use scope="col" or scope="row" on <th> to associate headers with cells. Use <caption> for a table title. Avoid using tables for layout; use CSS Grid or Flexbox. colspan and rowspan merge cells when needed.
```
<table>
  <caption>Scores</caption>
  <thead><tr><th scope="col">Name</th></tr></thead>
</table>
```
Step 4: In the browser, the table renders as a grid. Browsers add default borders. Use CSS to style. Prefer thead/tbody/tfoot and caption for structure and screen readers.
```
<table><tr><th>Name</th></tr><tr><td>Alice</td></tr></table>
```
Step 5: Checkpoint: Which element represents a header cell in a table?
```
<th>
```
Step 6: Correct! <th> is for header cells (bold by default). <td> is for data cells. Use thead for header rows and scope for accessibility.
```
<th>Name</th>
```
Step 7: You now know table structure. Complete the challenges below to master the <table> tag!

table.html

1 / 7

📊

Tutor:The <table> tag represents tabular data. Use <tr> for rows, <th> for header cells, <td> for data cells. Tables are for data in rows and columns—not for page layout. Use semantic structure: thead, tbody, tfoot, caption.

⭐ 0 EXP

Table Mastery

Structure tabular data with table, tr, th, td.

Concept 1: The Table Tag

The <table> tag represents tabular data. Use <tr> for rows, <th> for header cells, <td> for data cells. Tables are for data in rows and columns—not for page layout.

System Check

Which element represents a header cell in a table?

Community Holo-Net

Table Patterns

Using thead, tbody, scope? Share your patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <table> Tag

Pascual Vila

Frontend Instructor.

The <table> tag represents tabular data. Use <tr> for rows, <th> for header cells, <td> for data cells. Use <thead>, <tbody>, <tfoot> for structure and <caption> for a table title. Do not use tables for page layout—use for data only. Prefer CSS Grid or Flexbox for layout.

Structure and accessibility

Use scope="col" or scope="row" on <th> to associate headers with cells (screen readers). Use <caption> for the table title. colspan and rowspan merge cells when needed.

Best practices

Use tables only for tabular data. Wrap header rows in <thead>, body in <tbody>, footer in <tfoot>. Add <caption> and scope on <th> for accessibility.

Table Tag Glossary

<table>: Represents tabular data. Contains rows (<tr>) with header cells (<th>) or data cells (<td>). Use for data, not layout.
<th> / <td>: <th> = header cell (bold by default). <td> = data cell. Use scope on <th> for accessibility. Both go inside <tr>.
<thead>, <tbody>, <caption>: Structure: thead = header rows, tbody = body, tfoot = footer. caption = table title (place after <table>). Improves semantics and accessibility.

📖 INDEX