HTML Lists and Tables

The concept

Use ul for an unordered list and li for each item. Use a table only for data that has rows and columns: tr is a row, th is a header cell, and td is a data cell. Headers let assistive technology connect each value to its column.

Code example

HTML

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<table>
  <tr><th>Language</th><th>Year</th></tr>
  <tr><td>C</td><td>1972</td></tr>
</table>

Preview example Example details

Follow the code

Open the walkthrough to inspect the example one step at a time.

Show guided walkthrough

Guided walkthroughReady

1<ul>

2 <li>HTML</li>

3 <li>CSS</li>

4</ul>

5<table>

6 <tr><th>Language</th><th>Year</th></tr>

7 <tr><td>C</td><td>1972</td></tr>

8</table>

Follow the example

Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.

View the complete dry-run table

Prepared trace of the published program. Some rows group repeated iterations.
What happens	State after step	Output so far
ul starts an unordered list.	`—`	—
Each li is one list item.	`—`	—
table holds rows and columns of data.	`—`	—
A row of header cells.	`—`	—
A row of data cells under those headers.	`—`	—

Behind the scenes

How HTML processes this code

The browser parses HTML into a document tree and renders its elements. HTML does not execute as a sequence of program statements.