Lists and Tables

Lists

Lists help you organize content on web pages, improving readability and structure. You’ll find in the future you might be outlining steps, highlighting features, or presenting data. If you’re writing something technical and have a paragraph…try to find a way to turn it into a list!

HTML offers three tags for organizing short pieces of information:

1. Unordered List (<ul>) – Displays items as bullet points.
2. Ordered List (<ol>) – Displays items as numbered points.
3. List Item (<li>) – Defines each entry in a list, appearing as either a bullet or number, depending on the list type. The content of a list item can be any combination of plain text and inline elements.

Lists help structure content clearly, making it easier to scan and understand. There are different reasons to use unordered (bulleted) versus ordered (numbered) lists.

• If you rearrange the items in an unordered list, the list’s meaning does not change. For example, different definitions of a word.
• If you rearrange the items in an ordered list, the list’s meaning changes. For example, a recipe.

Example: Unordered List

The following code:

<ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
</ul>

Would produce the following result:

• Milk
• Eggs
• Bread

Example: Layered (Nested) Lists

The following code:

<ol>
    <li>Homework</li>
    <ul>
        <li>Physics Lab</li>
        <li>Calculus Webassign</li>
    </ul>
    <li>Laundry</li>
    <li>Grocery Shopping</li>
    <ul>
        <li>Milk</li>
        <li>Eggs</li>
    </ul>
</ol>

Would produce the following result:

1. Homework
   • Physics Lab
   • Calculus Webassign
2. Laundry
3. Grocery Shopping
   • Milk
   • Eggs

Summary

Tables

Tables put information together in rows and columns. Generally, rows combine to give multiple pieces of information about one object, and columns give the same piece of information for every object. Engineers use tables to organize and present lots of types of data clearly, like if you wanted water/steam equilibrium properties.

It is especially useful for information that has a type and value (or values). A table has rows, and can have any number of columns within each row. Traditionally, to create a “grid-style” table, every row should have the same number of columns. The cell is the intersection of a row and column, and has some data in it.

HTML Table Tags:

Data Cell (<td>) – Defines a standard data cell within a row.

Table (<table>) – Defines the overall structure, containing rows and cells.

Table Row (<tr>) – Creates a row of cells within a table.

Header Cell (<th>) – Marks a header cell, typically bold and centered.

Example: Table with Header Row

The following code:

<table>
    <tr>
        <th>Sample No.</th>
        <th>Distance (m)</th>
        <th>Weight (kg)</th>
        <th>Color</th>
    </tr>
    <tr>
        <td>1</td>
        <td>4.6</td>
        <td>65</td>
        <td>Red</td>
    </tr>
    <tr>
        <td>2</td>
        <td>12</td>
        <td>36</td>
        <td>Red</td>
    </tr>
    <tr>
        <td>3</td>
        <td>32.4</td>
        <td>89</td>
        <td>Blue</td>
    </tr>
</table>

Would produce the following result:

Summary