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! 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.

HTML List Tags:

HTML offers three tags for organizing short pieces of information:

Tag Name	Tag Description	Tag Type	Display Type
`<ul>`	The unordered list tag displays items as bullet points.	Paired	inline
`<ol>`	The ordered list tag displays items as numbered points.	Paired	inline
`<li>`	The listed item tag 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.	Paired	inline

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:

Homework
- Physics Lab
- Calculus Webassign
Laundry
Grocery Shopping
- Milk
- Eggs

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.

A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example the timetable for a local swimming pool.

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:

Tag Name	Tag Description	Tag Type	Display Type
`<table>`	The table tag defines a container for a data table with rows and cells.	Paired	Block
`<td>`	A table cell is created with a `<td>` tag (“td” stands for “table data”).	Paired	inline
`<tr>`	The table row tag creates a row of cells within a table.	Paired	Block
`<th>`	The table header tags create a cell within a table row, which is intended to be displayed as a title.	Paired	inline

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:

Sample No.	Distance (m)	Weight (kg)	Color
1	4.6	65	Red
2	12	36	Red
3	32.4	89	Blue

Exercises

Exercise 1

First of all, make a copy of blank-template.html and minimal-table.css in a new directory on your local machine. The HTML template already contains a <link> element to apply the CSS to the HTML, so you don’t need to worry about that.

The content of every table is enclosed by these two tags: <table></table>. Add these inside the body of your HTML.

The smallest container inside a table is a table cell, which is created with a <td> element. Add the following inside your table tags <td>Hi, I'm your first cell.</td>

If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so:

<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>

<td>I'm your fourth cell.</td>

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element (‘tr’ stands for ‘table row’). Let’s investigate this now.

Place the four cells you’ve already created inside <tr> tags, like so:

<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>

Now you’ve made one row, try making more. Each row needs to be wrapped in an additional <tr> element, with each cell contained in a <td>.

Exercise 2

Try https://www.tablesgenerator.com/html_tables and put in some data. Generate the HTML table and copy it into a minimum framework. Does the table show up the way you want? What can you do to change the aesthetics?

Exercise 3

Engineers use tables to organize and present lots of types of data clearly, like if you wanted water/steam equilibrium properties. Create an HTML table using the water/steam table properties. (You’ll also look into how to write mathematical characters as part of this exercise, likely using Unicode).