lists and tables


           List and Table References

creating lists

  • An Unordered List (UL)

    • Each item identified by a <li> .... </li> (list item) and displays a bullet

      • You can have a list within a list

      • There is a different bullet for each level

    • The list starts with a <ul> and ends with a </ul>

    • The </li> tag is new in xhtml

  • An Ordered List (OL)

    1. I have now numbered each item in the list - the numbers are assigned automatically and they're re-ordered when I insert new items

    2. Use the <ol> tag to start the list

    3. Note that the coding is almost the same as the <ul>

Here's what the code looks like for the lists you've just seen.

Please note that I've used <br/> tags for the spacing in this example.
As we'll see later, that should be done in the stylesheet - you simply define how
much space to leave above and below every <li> tag.

example of xhtml lists


The table is one of the more useful tools to format information on the page.

It used to be that entire websites would be formatted using tables. Now, that is passé and everyone will recommend that you use stylesheets to do the formatting. However, there are many situations where a quick table will serve to solve a problem that may be too long to solve with CSS.

You can change everything in the table.
A table is a useful tool to format the page. I can use the table to display text or pictures and align them the way I want.
By laying-out text and pictures in table cells I can achieve the look and specials effects desired. jackhammer animation

table structure

  • A simple table uses three basic tags:

    1. the <table> tag describes the table

    2. the <tr> (Table Row) tag describes rows in the table -you need a <tr> for each row

    3. the <td> (Table Data) tag describes cells (columns) in each row

    4. the <caption> and the header (<th>) are optional elements

  • Here's the code that describes the table above:

creating a table in xhtml

  • note that there are 3 <tr>and 2 <td> within each <tr> to build a table
    of 3 lines by 2 columns.

  • note also that each tag has a corresponding end tag </...>.

  • here' a useful tip: don't leave any cells completely empty because that will mess-up the alignment of colums - always put at least one space in a <td> with the &nbsp; character

table attributes

Tables may possess the following attributes:

align text as desired

the background image for the entire table

table background color

thickness of the border in pixels - 0 is no border

color of the border

color of the edges of the border.

color of border shading

HEIGHT=number | %
change the height of the table - can be pixels or percent

WIDTH=number | %
change thewidth of the table - can be pixels or percent

the space between table cells

the space between the edge and the text


Previous            Next