lists and tables

references

           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








tables

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.

THIS IS A SAMPLE TABLE
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=CENTER | LEFT | RIGHT
align text as desired

BACKGROUND=image
the background image for the entire table

BGCOLOR=color
table background color

BORDER=number
thickness of the border in pixels - 0 is no border

BORDERCOLOR=color
color of the border

BORDERCOLORLIGHT=color
color of the edges of the border.

BORDERCOLORDARK=color
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

CELLSPACING=number
the space between table cells

CELLPADDING=number
the space between the edge and the text



Top

Previous            Next