Rows & Cells

After this lesson, you can write table rows, header cells, and data cells in a consistent arrangement.

BEGIN WITH A QUESTION

Understanding begins with a question.

The number ‘12’ says little on its own. In the ‘Science’ row and ‘Book count’ column, it gains meaning.

Write table rows, header cells, and data cells in a consistent arrangement.

UNDERSTAND THE CONCEPT

Table → tr → cells

Table wraps the table. Tr wraps one row. Th is a header cell; td is a data cell. Th and td belong inside tr, rather than directly inside table. In a simple table, every row has the same number of columns.

A header is also a cell

The first row can contain th for column names. Subsequent rows contain data, and their first cell can also be th if it names the row. Th provides header meaning, beyond bold text.

The browser may add tbody

When parsing tr directly inside table, the browser may add tbody to the document structure. This is an example of HTML recovery or completion. In the next lesson, you will write row groups explicitly for clarity.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<table>
  <tr><th scope="col">Category</th><th scope="col">Book count</th></tr>
  <tr><th scope="row">Science</th><td>12</td></tr>
  <tr><th scope="row">Stories</th><td>18</td></tr>
</table>

BROWSER RESULT

Each row has two cells. The Science and Stories headers name rows; the numbers in td are sample data.

COMMON MISTAKES

<table><td>Science</td><td>12</td></table>

These cells have no parent row. Wrap each pair in tr; use th when a cell is a header.

TRY TOGETHER

Practice clarifies understanding.

Complete the element that wraps one row.

<><th scope="row">Science</th><td>12</td></tr>

Show a hint

Short for table row.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Record garden seedlings

Create a two-column table: Plant and Pot count. Use th for column headings, then at least three plant data rows with cells inside tr.

<h1>Sample Garden Data</h1>
<table>
  <!-- Add rows and cells -->
</table>

index.htmlHTMLLn 1, Col 14 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Tr wraps a row; th and td wrap cells.
Th is a header cell; td is a data cell.
Simple tables keep their column count consistent.

Tables

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

HTML table °HTML element °

Library: Three languages behind one page ↗

Next lesson →