Lesson 6

Tables

Use and misuse of tables
Tables in HTML were invented to display tabular information:-) However, over the years it has been misused to control the layout to web pages. Look at the source code and if the border is set to zero, substitute the value "1". This shows if the table looks reasonable or a mess. If the latter then tables should not be used.

Tags for tables include <table>, <tr> (row tag) and <td> (cell tag). For an example, (5) click here.

NOTE: The 'border' attribute controls the thickness of the lines around the cells and the table. The 'cellspacing' attribute controls the space between the lines around the cells and the line around the table. The 'cellpadding' attribute controls the space between the cell border and the cell content.

Other Table tags
Sometimes a cell flows over two or more rows or columns. (6) See this example, which uses "colspan" and "rowspan".

Sometimes you want to leave a cell blank. To do so, insert a non-breaking space ("&nbsp;").

To insert a picture into a table, use the picture tag, not forgetting to include sizes and alt attributes.

Background colors can be added to a table, a row or even individual cells. Sometimes in tables with a lot of rows, every third row or so has a different background color, making it easier to read across the table.

Text can be aligned (align=) "left", "center" or "right". It can also be vertically aligned (valign) "top", "middle" or "bottom".

Other reasons for using a table with a picture
Sometimes in an animated picture, only a small portion is actually animated. A table with zero borders can be used to speed up the downloads.

Lists

Types of Lists
Lists come in two flavours: ordered and unordered. The tags are <ol>...</ol> and <ul>...</ul>. The differences between these are that the items in an ordered list are preceded by a number and the items in an unordered list are preceded by a bullet (a large dot).

Items
Every item in a list is started with <li> and ended with </li>. Do not place any content between items. For an example of lists, click here.

Lists within Lists
You can insert a list within another list, but remember that the included list is an item in the including list. For an example of lists, click here.

Previous Lesson

Next Lesson