In this lesson you will
- Pick the right list type for the content
- Build a data table with headers screen readers understand
- Know when a table is the wrong tool
Three kinds of list
An unordered list, <ul>, is for items where the order does not change the meaning, such as features or ingredients. An ordered list, <ol>, is for steps, rankings or anything where position matters; the browser numbers it for you. Each item in either list is an <li>, and only <li> elements can be direct children of ul and ol.
<ol> has useful attributes: start="5" begins counting at 5, reversed counts down, and type="a" or type="i" uses letters or Roman numerals. Lists can nest: put a whole new <ul> inside an <li>, never directly inside the parent list.
A description list, <dl>, pairs terms with descriptions: <dt> is the term and <dd> its description. It suits glossaries, FAQs and key-value details such as "Opening hours: 9 to 5".
Console
- Console messages, errors, form data and clicked links appear here.
Add start="3" to the ol and watch the numbers change.
Building a data table
A table is built from rows (<tr>) of cells. Data cells are <td>; header cells are <th>. Group the header row in <thead> and the data rows in <tbody>, and add <tfoot> for totals. These groups help screen readers, printing (headers repeat on every page) and styling.
<caption> must be the first thing inside <table>. It is the table’s title, and screen readers announce it when someone reaches the table. scope="col" on a th says it labels a column; scope="row" says it labels a row. With them, a screen reader can say "Price, AED 25" as the user moves through cells.
A cell can span several columns with colspan="2" or several rows with rowspan="2". Use spans carefully: complex merged tables are hard for everyone to read, and splitting into two simple tables is often better.
Console
- Console messages, errors, form data and clicked links appear here.
The fares are made-up sample numbers for practice, not official prices. border and cellpadding are old styling attributes used here only so the grid is visible; in real pages use CSS.
When not to use a table
Years ago, whole page layouts were built with tables. Do not do this: screen readers announce every row and column, the layout cannot adapt to phones and the code is hard to change. Use CSS Grid or Flexbox for layout, which you will learn in the CSS course. Tables are for data you would put in a spreadsheet.
Wide tables overflow small screens. A simple fix is to wrap the table in a container that scrolls sideways (overflow-x: auto in CSS) so the page itself does not scroll horizontally.
Common mistakes
Text directly inside ul or ol
<ul>Item</ul>or a nested<ul>placed straight inside a<ul>is invalid. Everything goes inside<li>elements.Bold td instead of th
Making the first row bold with CSS does not make it a header. Use
<th>withscopeso assistive technology knows which cells are labels.Numbering steps by hand
Typing "1." "2." in paragraphs means renumbering by hand whenever a step changes.
<ol>does the numbering and tells screen readers how many steps there are.
Exercise
Build a weekly timetable: a table with a caption, a header row inside thead with at least two th scope="col" cells, and at least two rows in tbody. Below it, add an ordered list of at least three study steps.
Console
- Console messages, errors, form data and clicked links appear here.
- The table has a
caption - At least two
th scope="col"inthead - At least two rows in
tbody - An ordered list with at least three items
Show one possible solution
<table>
<caption>My study week</caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sunday</td>
<td>HTML</td>
</tr>
<tr>
<td>Monday</td>
<td>CSS</td>
</tr>
</tbody>
</table>
<ol>
<li>Read the lesson</li>
<li>Do the exercise</li>
<li>Take the quiz</li>
</ol>Quick quiz
Finished the lesson?
Questions people ask
Can I change the bullet style of a list?
Yes, with CSS: list-style-type sets circles, squares, numbers or none, and ::marker styles the bullet itself. Keep the ul/ol element either way, because the meaning stays the same.
Do Arabic pages number lists right to left?
With dir="rtl", bullets and numbers move to the right side automatically. Numbers stay Western digits unless you set list-style-type: arabic-indic in CSS.
Is it okay to use a table for a calendar?
Yes. A month calendar is real tabular data: days of the week are column headers and each week is a row.
How do I make a table sortable?
HTML alone cannot sort. You add a small JavaScript function that reorders rows when a header button is pressed; the JavaScript course covers it. Keep the headers as <th> and put a <button> inside them.
What is the difference between thead and th?
<thead> groups the header rows of the table. <th> is a single header cell and can appear anywhere, for example as the first cell of each body row.
Sources
Facts in this lesson were checked against these official pages on 20 October 2026.
Code examples stay in English and run in a sandbox on your device. Arabic text is pending native review. If you spot a mistake, tell us through the contact page.