Lists & Tables

1
<ul>
2
  <li>Apples</li>
3
  <li>Bananas</li>
4
  <li>Oranges</li>
5
</ul>

1
<ol>
2
  <li>Preheat oven to 350F</li>
3
  <li>Mix flour and sugar</li>
4
  <li>Bake for 30 minutes</li>
5
</ol>

1
<!-- Lowercase letters -->
2
<ol type="a">
3
  <li>First item</li>
4
  <li>Second item</li>
5
</ol>
6

7
<!-- Roman numerals starting at 5 -->
8
<ol type="I" start="5">
9
  <li>Item five</li>
10
  <li>Item six</li>
11
</ol>
12

13
<!-- Reversed order -->
14
<ol reversed>
15
  <li>Step 3 (shown first)</li>
16
  <li>Step 2</li>
17
  <li>Step 1</li>
18
</ol>

1
<ul>
2
  <li>Fruits
3
    <ul>
4
      <li>Apples</li>
5
      <li>Bananas</li>
6
    </ul>
7
  </li>
8
  <li>Vegetables
9
    <ul>
10
      <li>Carrots</li>
11
      <li>Broccoli</li>
12
    </ul>
13
  </li>
14
</ul>

1
<dl>
2
  <dt>HTML</dt>
3
  <dd>HyperText Markup Language — the standard language for web pages.</dd>
4

5
  <dt>CSS</dt>
6
  <dd>Cascading Style Sheets — controls the presentation of HTML.</dd>
7

8
  <dt>JavaScript</dt>
9
  <dd>A programming language that adds interactivity to web pages.</dd>
10
</dl>

1
<table>
2
  <caption>Employee Salary Overview</caption>
3
  <thead>
4
    <tr>
5
      <th scope="col">Name</th>
6
      <th scope="col">Department</th>
7
      <th scope="col">Salary</th>
8
    </tr>
9
  </thead>
10
  <tbody>
11
    <tr>
12
      <td>Alice Johnson</td>
13
      <td>Engineering</td>
14
      <td>$95,000</td>
15
    </tr>
16
    <tr>
17
      <td>Bob Smith</td>
18
      <td>Marketing</td>
19
      <td>$72,000</td>
20
    </tr>
21
  </tbody>
22
  <tfoot>
23
    <tr>
24
      <td colspan="2">Total</td>
25
      <td>$167,000</td>
26
    </tr>
27
  </tfoot>
28
</table>

1
<th scope="col">Name</th>     <!-- Column header -->
2
<th scope="row">Alice</th>    <!-- Row header (e.g., first column in each row) -->

1
<table>
2
  <tr>
3
    <th>Name</th>
4
    <th colspan="2">Contact Details</th>
5
  </tr>
6
  <tr>
7
    <td>Alice</td>
8
    <td>alice@example.com</td>
9
    <td>+1-555-0100</td>
10
  </tr>
11
  <tr>
12
    <td rowspan="2">Bob</td>
13
    <td>bob@example.com</td>
14
    <td>+1-555-0101</td>
15
  </tr>
16
  <tr>
17
    <!-- This row has Bob's name merged from above -->
18
    <td>bob.work@example.com</td>
19
    <td>+1-555-0102</td>
20
  </tr>
21
</table>

1
<style>
2
  table {
3
    width: 100%;
4
    border-collapse: collapse;
5
  }
6
  th, td {
7
    border: 1px solid #ddd;
8
    padding: 8px;
9
    text-align: left;
10
  }
11
  th {
12
    background-color: #f4f4f4;
13
  }
14
  tr:nth-child(even) {
15
    background-color: #f9f9f9;
16
  }
17
  caption {
18
    font-weight: bold;
19
    margin-bottom: 8px;
20
  }
21
</style>