HTML Guide
Lesson 4: Lists and Tables
We're getting there. This lesson will tackle two methods of listing information.
A list can be ordered or unordered. It can also be a definition list, where the list contains both terms and definitions. Let's look at unordered lists first, since they are arguably the most useful in terms of web design.
The opening tag for an unordered list is <ul>. To make a list item, place a li element inside of the ul. Keep in mind that both of them should have a closing tag. So an example list would be:
<ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul>
By default, the unordered list will show a list with bullets.
You can also put a list within a list. Then you just put the new list inside a list item (I'm going to set this up in an indented format so that it's easier to understand; you don't have to write your HTML like this, but it's often a good idea to understand the structure of the page):
<ul> <li>List Within a List <ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </li> </ul>
That would display with another list nested within this list.
An ordered list is made with the ol element and is used - well, exactly the same as a ul. The only difference is that the ordered list is numbered: it's any kind of a list where the order actually matters. An ordered list could for instance be any set of instructions which must be followed in a precise order. An unordered list is a list where the order doesn't matter, such as if just listing some facts or features that are independent of one another.
You can also place other ordered lists inside this list like above with the unordered list, and you can place an ordered list inside an unordered one if you want to (or the other way around). Basically, lists are pretty flexible.
Definition lists are a bit different; the list element is dl, but the list items are of two kinds: terms and definitions. Terms are made with dt elements; definitions are made with dd elements. We might write a definition list somewhat like this:
<dl> <dt>Bulbasaur</dt> <dd>A Grass Pokémon with Vine Whip, Razor Leaf and various powder attacks.</dd> <dt>Charmander</dt> <dd>A Fire Pokémon with a flame on its tail that indicates its life force.</dd> <dt>Squirtle</dt> <dd>A small turtle that has a tendency to join weird sunglasses gangs.</dd> </dl>
And this will end up with a list of the terms and then the definitions below them.
Now, you might ask, what is the purpose of all this list stuff? Are lists really that useful? The answer is: Yes, they are. Just be patient; we haven't gotten to the magic that is CSS yet. CSS, my friend, can turn a simple list into more things than you could ever imagine. Or well, you could imagine it, but you can do more with them than you think.
Tables... well, you know what a table is. It lines up information. A table element is simply called table, and then to make a simple table you will also use table rows, tr; table headers, th; and table data, td.
Basically, the tr element makes a horizontal row of cells. You put those within the table element and let them contain the ths and tds that will be in said row - as many of them as you want. The th and td elements both stand for cells, but th is for if the cell is a heading in the table and td is for simple data cells. An example table could therefore be:
<table>
<tr>
<th>Name</th>
<th>Type 1</th>
<th>Type 2</th>
</tr>
<tr>
<td>Bulbasaur</td>
<td>Grass</td>
<td>Poison</td>
</tr>
<tr>
<td>Charmander</td>
<td>Fire</td>
<td>-</td>
</tr>
<tr>
<td>Squirtle</td>
<td>Water</td>
<td>-</td>
</tr>
</table>
There are various table-specific attributes, but the most useful ones are rowspan and colspan, which specify that the table cell should stretch over a certain number of rows or columns. For example:
<table>
<tr>
<th colspan="3">Pokémon data</th>
</tr>
<tr>
<th>Name</th>
<th>Type 1</th>
<th>Type 2</th>
</tr>
<tr>
<td>Charmander</td>
<td rowspan="3">Fire</td>
<td>-</td>
</tr>
<tr>
<td>Charmeleon</td>
<td>-</td>
</tr>
<tr>
<td>Charizard</td>
<td>Flying</td>
</tr>
</table>
This essentially causes the top heading to span three columns (which is why only one cell is needed where the other rows have three) and the "Fire" cell to span three rows (which is why the two succeeding rows have only two cells each).
An example of how everything I've mentioned on this page looks by default can be found on our wonderful example page. Note that it isn't very clear how the rowspan works in the table with no borders, but in fact it says "Fire" by all three, not just by Charmeleon. You will see this in the next lesson as we start learning to style the page.
Page last modified April 17 2022 at 19:42 UTC