Lists and tables

Lists

Ordered lists (<ol>)

The numbering of an ordered list consists of numbers or letters and not, e.g., dots or circles.

    
<ol>
    <li>First</li>
    <li>Second</li>
</ol>

Unordered lists (<ul>)

The numbering of an unordered list consists of, e.g., dots or circles.


<ul>
    <li>First</li>
    <li>Second</li>
</ul>

Similarities

We can't put any other tags between the <li> list item tags (meaning between pairs of these tags, not between the opening and closing tags). We can style both lists (change the look of their numbers, dots, etc.) using the HTML type argument. The possible types for <ol> are: 1, a, A, i, and I. The default one is 1. The possible styles for <ul> are: circle, disc, and square. The default one is disc.

The ordered list can also take the start argument which states from what number will the numeration count. Example:


<ol start="3" type="I">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
    <li>Sixth</li>
</ol>
  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth

Nested lists


<ol>
    <li>First</li>
    <li>Second
        <ul> <!-- the default type of this list is circle because it is nested -->
            <li>Third</li>
            <li>Fourth
                <ol type="I">
                    <li>Fifth</li>
                    <li>Sixth</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>Seventh</li>
</ol>
  1. First
  2. Second
    • Third
    • Fourth
      1. Fifth
      2. Sixth
  3. Seventh

Tables

We use three tags to create tables: <table> (the whole table), <tr> (row), <td> (cell). You will learn how to display the border of a table in the first lesson about CSS.


<table>
    <tr>
        <td>Title</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>title1</td>
        <td>value1</td>
    </tr>
    <tr>
        <td>title2</td>
        <td>value2</td>
    </tr>
</table>
Title Value
title1 value1
title2 value2

The colspan and rowspan arguments determine how many columns/rows get merged.


<table>
    <tr>
        <td>Title</td>
        <td>Value</td>
    </tr>
    <tr>
        <td colspan="2">title1</td>
    </tr>
    <tr>
        <td rowspan="2">title2</td>
        <td>value2</td>
    </tr>
    <tr>
        <td>value3</td>
    </tr>
</table>
Title Value
title1
title2 value2
value3

A full, properly structured HTML table looks like the one below.


<table>
    <thead> <!-- used to group the header content of the table -->
        <tr>
            <th>Name</th> <!-- <th> represents a header cell in the table -->
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody> <!-- used to group the main content of the table -->
        <tr>
            <td>John</td>
            <td>28</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>32</td>
            <td>Los Angeles</td>
        </tr>
    </tbody>
</table>