Simple HTML and CSS

Lists and tables

A list of items can be enclosed in <ul> en </ul>, this gives you an "unordered list", meaning the items have bullets, but not any kind of numbering. If you do want the items numbered, you use <ol> instead of <ul>, which means "ordered list". The items themselves are introduced by <li>, short for "list item".

In an "ordered list" you can say what kind of numbering you prefer:

  1. numbers (<ol type=1>)
  2. letters (type=a of type=A)
  3. Roman numerals (type=I or type=I)

Note: In strict HTML 4.0, specifying the kind of numbering is not allowed. This has to be done in CSS, by creating a special class of <ol>.


A table consists of rows and columns. Each table is between <table> and </table>. Within that there are rows, enclosed in <tr> (table row) and </tr>. A row consists of columns, indicated by <td> and </td> (table data).

A table can also have a <thead> part and a <tbody> part. The <thead> then has <th> where the body has <td>. This makes it possible to give the table's head a different presentation, again by using CSS, like making it bold or using a somewhat larger font.

Sometimes you'll want a table cell that has the width of two or more normal cells (columns). You can do that with colspan, for example <td colspan=2>. Likewise, cells can be made as high as two or more other cells (rows). You can achieve that with rowspan. I applied this a lot myself here.

The cells' widths and heights are determined automatically, but you can adjust them using CSS. The same is true for borders.

Previous Start Next

Copyright © 2002 R. Harmsen