Chapter 5: Lists and Tables

HTML lets you create different tyes of lists -- ordered and unordered. They are simple to create and use.

When you want to present complicated data, you'd probably want to use tables. They are rather difficult to create and manipulate, but you should know the basics at least. After you've learned how to make tables, you can always use other HTML editors such as MS Word or Frontpage to create tables automatically.


Creating Ordered Lists

Ordered lists are useful in explaining step-by-step instructions. You can use different symbols to number the items. Anything in the list is indented so that it stands out from the regular text.

1. Type the title of the ordered list.
2. Type <OL.
3. If desired, type TYPE=X, where X represents symbols you want to use to number the list: A for capital letters, a for small letters, I for capital roman numerals, i for small rman numerals, and 1 for numbers, which is the default.
4. If desired, type START=n, where n is the initial numerical value the list should start with. (i.e., don't put b, II, iv, etc.)
5. Finish definition by >.
6. Type <LI>. You can insert TYPE and START attributes inside LI tag if you wish.
7. Type the text you want to be in the list.
8. Repeat 6-7 for however many items you have on the list.
9. Finish the list by </OL>.

Creating Unordered Lists

Unordered list works in similar way as the ordered list, except that the items are not numbered.

1. Type <UL.
2. If desired, type TYPE=shape, where shape can be circle, disc, or square. End with >.
3. Type <LI>. Similar to ordered lists, you can specify TYPE in LI tag if you wish.
4. Type the text to be in the list.
5. Repeat 3-4 for however many items you have on the list.
6. Type </UL> to finish the unordered list.

You can also create nested lists by inserting lists within a list. See example 5.1.


Creating a Simple Table

There are many kinds of tables. TABLE tag signals a start of a table, and TR defines starting of a new row. TH creates a header. TD starts a new column. Here we will create a table with 2 columns.

1. Type <TABLE>.
2. Type <TR> to start the first row.
3. Create a header cell in the first row by typing <TH>.
4. Type the contents of the first header.
5. Create a regular cell after the header cell by typing <TD>.
6. Type the content of the regular cell.
7. Repeat steps 2-6 to add new rows.
8. Finish the table with </TABLE>.

Optional: You can close the row with </TR> and each cell with </TH> or </TD>. See example 5.2

Adding Headers

Headers in tables are automatically shown in bold. They can be placed anywhere you want by labeling a cell with TH tag. In example 5.2, the header cells were along a column. To put the header cells along the top, you need to specify the headers in a slightly different order.

1. Type <TABLE>.
2. Type <TR> to start the first row.
3. Create a header cell in the first row by typing <TH>.
4. Type the contents of the first header.
5. Repeat steps 3-4 for each header cell.
6. Type <TR> to create a new row.
7. Type <TD> to define the first regular cell in the new row, and type the cell data.
8. Repeat step 7 for each regular cell.
9. Finish the table with </TABLE>.

Example 5.3 shows how to add headers in various places.


Exercise 7: A List in a table

In your MyPage.htm file, create a table with 2 rows and 2 columns In the first cell (row 1, column 1), type "New Products". In the second cell (row 1, column 2), download and insert this image:

In the fourth cell (row 2, column 2), type in the four items in an unordered list: VivaUrea T-Shirt, Leather Boots, Denim Shorts, Silk Blouse.

Your page should look like this:


Table Borders

So far the tables had no borders. The thickness of the border is controled by BORDER tag.

1. Inside the initial TABLE tag, type BORDER.
2. Type =n, where n is the thickness of the border in pixels. For no border, use 0.
3. **IE only** If desired, use BORDERCOLOR = "hex_number or color_name" to control the color of borders.

You can also decide which sides of the external borders are displayed. In the TABLE tag, after the BORDER attribute, type FRAME = location, where location is one of the following values:

void, for no external borders
above, for a single border on top
below, for a sigle border on bottom
hsides, for a border on both the top and bottom sides
vsides, for the both the right and lef sides
rhs, for a single border on the right side
lhs, for a single border on the left side
box or border, for a border on all sides (default)

Spanning a Cell across Multiple Cells

Suppose you want to create a table that looks like this:

  Summer Winter
Adjective Hot Warm Cold Chilly
Active Dormant

You will notice that there are two sub-rows in the 'Adjective' row, and two columns under 'Summer' and 'Winter' columns. You can do this by COLSPAN or ROWSPAN tags.

To span a cell across two columns:

1. When you get to the poin in which you need to define the cell that spans more than one column, either type <TH or type <TD, depending on whether you are working with a header cell or regular cell.
2. Type COLSPAN = n>, where n equals the number of columns the cell should span.

To span a cell across two rows, you do the same as above except instead of COLSPAN, type ROWSPAN.

See example 5.4 for more tables with various borders and column/row spans.


Changing sizes

You can use the WIDTH and HEIGHT attributes to resize the whole table, or to define the dimensions of particular cells.

Aligning Contents

You can refine the look of a table by aligning the contents in different ways with ALIGN and VALIGN tags.

1. Place the cursor in the initial tag for the cell, row, or section, after the name of the tag but before the final >.
2. Type ALIGN=direction, where direction is left, center, right, justify (flush both sides), or char(aligned with a given character).
3. If you've used char in step 2, type CHAR="a", where a is the character to be used for alignment (such as a decimal point or a comma).

The above steps align the contents horizontally. To align them vertically,

1. Place the cursor after <TH or <TD tag.
2. Type VALIGN=direction, where direction is either top, middle, bottom, or baseline.

Example 5.5 -- Tables with different sizes, alignments, and colors.


Exercise 8: Modifying the table

Here you will modify the table created in exercise 7. Merge the two cells in the first row so that your table looks like this:

A
B C

- Cell A should have the "New Product" text and the image. Dimension: 420(width)x50 pixels.
- Cell B's dimension: 30x140 pixels.
- Cell C's height: 140 pixels. This cell should also be vertically aligned to the top.
- Also vary the color of each cell.
- The border should be set to 1.

The table should look like this:


Back to the Top
To the Table of Contents

Last Updated September 9, 2000 by Grace Pok