Chapter 1 deck Chapter 2 deck Chapter 3 deck Chapter 4 deck Chapter 5 deck Chapter 6 deck Chapter 7 deck Chapter 8 deck Chapter 9 deck Chapter 10 deck Chapter 11 deck Chapter 12 deck Chapter 13 deck Chapter 14 deck

Lists & Tables

6 slides · use ←/→ or Space to navigate, F for fullscreen.

Reading view

← Back to the full Chapter 2 deck

Lists & Tables

Fullscreen for presentation · Print / PDF for a handout

1 / 6

Lesson

Lists & Tables

Unordered, ordered and description lists, plus accessible tabular data.

Lists & Tables

Unordered & Ordered Lists

<ul>
  <li>Tea</li>
  <li>Green Tea</li>
</ul>

<ol type="1" start="1">
  <li>Preheat oven</li>
  <li>Mix dry ingredients</li>
  <li>Bake 30 minutes</li>
</ol>

<ul> — items marked with bullets; order doesn't matter; supports unlimited nesting.
<ol> — numbered steps. type: 1 (default), A, a, I, i. start sets the first number.

Use <ul> for unordered sets (navigation menus, features) and <ol> for steps, instructions and rankings.

Lists & Tables

Description Lists & Nesting

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the structure of web pages</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - the styling of web pages</dd>
</dl>

<dl> — description list container (glossaries, FAQs, metadata).
<dt> — description term (the word being defined).
<dd> — description definition (the explanation, indented).

Lists nest naturally by placing a new <ul>/<ol> inside an <li>.

List CSS tips

list-style-type: none — removes bullets (for nav menus).
list-style-image: url() — custom bullet image.
list-style-position: inside — bullet inside the box.

Lists & Tables

Tables — Basic Structure

<table>
  <caption>Student Grades</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Grade</th></tr>
  </thead>
  <tbody>
    <tr><td>Aina</td><td>A</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Passed: 1</td></tr>
  </tfoot>
</table>

Element	Purpose
`<table>`	Container for the entire table
`<caption>`	Accessible title — place immediately after `<table>`
`<thead>`	Groups header row(s) — aids screen readers
`<tbody>`	Groups body rows (browser adds if omitted)
`<tfoot>`	Groups footer rows (totals, summaries)
`<tr>`	Table row
`<th>`	Header cell — bold by default; add `scope="col"` or `scope="row"`
`<td>`	Table data cell — regular content

Tables are for tabular data ONLY. Use CSS Grid or Flexbox for page layout.

Lists & Tables

Tables — Spanning, Alignment & Styling

colspan — span columns: <th colspan="3">Fruit Juice Drinks</th>
rowspan — span rows: <td rowspan="2">Shared Cell</td>
Alignment via CSS: text-align: center | right, vertical-align: top.

table { border-collapse: collapse; width: 100%; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #ddd; }
thead { background-color: #002137; }
tbody tr:hover { background-color: #0a2040; }

Deprecated HTML attributes → use CSS instead

align → text-align
cellspacing → border-spacing
bgcolor → background-color
valign → vertical-align
cellpadding → padding on td/th
border → the CSS border property

Lists & Tables

Activity — complete the code

Complete the list and table markup.

<ul>
  Home</li>
  <li>About</li>
</ul>
 
<table border="1">
  <tr>
    <>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    Aina</td>
    <td>21</td>
  </tr>
</table>