Anna Perkins

HTML 5: Tables and Lists

Tables and lists can be useful for formatting your text and images within a webpage. You can even use a table to format the whole website layout, but divs (next tutorial) are more common. In fact, tables are becoming more outdated (and "frowned upon" unless you are actually displaying "tabular data"), and HTML divs and lists have become more prominent. For example, my top horizontal navigation bar is formatted using a list, and the rest of the layout using divs.

The straightforward nature of tables, however, makes them a good tag for beginners and useful to know in general. I still use them; for instance, my text effects tutorial is formatted using a table.

You can put text, lists, images, and even other tables inside a table. The table tag is defined as <table>. To start a row, use the <tr> tag, and to create a data cell in that row, use the <td> tag. Let's look at a simple two-column table.

A useful attribute for table formatting is colspan, which defines how many columns a cell <td> will span. You can also nest tables within tables. Let's make a mini website layout using nested tables and colspan.

The header cell, WEBSITE NAME HERE, should span the whole table, while the navigation cell should be under it and span about 1/3 of the table so that the body text can occupy 2/3 of the width. To achieve these proportions, we set the value of colspan in td accordingly: for the header, colspan=3; for the navigation, colspan=1; for the body text, colspan=2.

To put multiple rows for links within the navigation cell, we can nest a table within that td. We put in <table> followed by our rows and cells of links, and then we make sure to close off that table with </table>.

As you can see, I have also added the style attribute to several of the tags in the mini website layout. To make the example look better, I am using this attribute to center or left-align text and vertically align the navigation to the top of the cell.

Like tables have <table>, <tr>, and <td>, lists have tags for creating the list and inner tags for creating the items in the list, and CSS formatting can be applied to the list as a whole as well to individual list items. Also like tables, you can nest lists.

There are three types of lists: unordered <ul>, ordered <ol>, and description <dl>. I have never felt the need to use ordered or description lists, so I will focus on the power of the unordered list.

After the <ul> tag, the <li>creates the list item in a new row (like <tr> and <td> in one).

You can use CSS to force the list items appear on the same row, which is how I have set up my horizontal navigation bar. We use the style attribute in <li> and set the display to inline.