When to Use a Table

After this lesson, you can choose tables for two-dimensional data and lists for information that needs no columns.

BEGIN WITH A QUESTION

Understanding begins with a question.

You want to compare a library’s opening hours across three days. A long paragraph makes this tiring. Rows and columns make the relationships visible.

Choose tables for two-dimensional data and lists for information that needs no columns.

UNDERSTAND THE CONCEPT

Tables express row and column relationships

Tabular data contains intersecting information: a row may represent a day while a column gives its opening time. Each cell is understood through its row and column headers. That is the reason to use table.

Lists hold collections of items

An equipment list containing only item names needs just ul. Forcing it into a single-column table adds structure without benefit. Comparing several attributes across multiple items, however, is often clearer in a table.

Tables are not page layout tools

Do not use table to place a menu on the left and an article on the right. That is visual layout, rather than tabular data. HTML expresses the meaning of data; layout belongs to CSS, which follows this course.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<table>
  <caption>Sample reading room opening hours</caption>
  <tr><th scope="col">Day</th><th scope="col">Opens</th></tr>
  <tr><th scope="row">Monday</th><td>09.00</td></tr>
  <tr><th scope="row">Saturday</th><td>10.00</td></tr>
</table>

BROWSER RESULT

Days and opening times are two dimensions of information. These times are sample data for the exercise.

COMMON MISTAKES

<table><tr><td>Site menu</td><td>Main article</td></tr></table>

Menus and articles are not data compared through rows and columns. Use nav and main, then style their layout with CSS when needed.

TRY TOGETHER

Practice clarifies understanding.

01 Which information best suits a table?

Three items to bringA comparison of book counts by category and shelfAn article heading and hero image

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

WRITE · OBSERVE · UNDERSTAND

Choose the information’s form

Create a ul with at least two reading supplies. Below it, create a table for a fictional schedule with two columns (Day and Time), one header row, and at least two data rows.

<h1>Reading Room</h1>
<h2>Supplies</h2>
<h2>Sample Schedule</h2>

index.htmlHTMLLn 1, Col 13 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.

Use table for two-dimensional data.
Use lists for simple collections of items.
Tables are not page layout tools.

TablesLists

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 list °Semantic HTML °

Library: Three languages behind one page ↗

Next lesson →