The best way to practice making <table>s is to draw a table out on paper, analyze it, and then code it. Begin with some simple tables and work your way up.

Review Lesson 34 concerning analyzing and coding complex tables. You should also be comfortable with using all of the attributes listed below:

For the <table> tag:

WIDTH

HEIGHT

ALIGN

CELLSPACING

CELLPADDING

BORDER

BORDERCOLOR

BGCOLOR

BACKGROUND

For the <td> tag:

WIDTH

HEIGHT

ALIGN

ROWSPAN

COLSPAN

VALIGN

BGCOLOR

BACKGROUND

BORDERCOLOR

Use both percentages to make relatively sized tables and pixel values to make absolutely sized tables.

Coding Tip: To keep all of the possible attributes for the <table> and <td> tags straight in your mind, create an order to code them. HTML code doesn't require any particular order, but ordering your coding will keep you aware of your options. I use the order listed in the attribute's list above. I code the dimensions and alignment first followed by borders and color. You make a system that's easy for you to remember.

Using 'Stub' Data

Table cells won't properly render in the defined dimensions unless there is some content between the <td> and </td> tags. That's why I've used "Cell #x" in the tables used as examples.

There can be a problem if we want a blank cell or a cell that just displays a colored block without any text or image. To make a blank cell code in a <br> or &nbsp; between the <td> and </td> tags. This will let the cell size itself to the WIDTH and HEIGHT attributes in the <td> tag without displaying any content.

To The Table Exam

Back To Advanced HTML Index