Table Attributes

The attributes of the <table> tag are align="center", width=60%, cellspacing="5", cellpadding="5", border="2". What do these attributes mean, and what are the possible values. The align attribute tells the browser where the table appears on the page. The possible values are left (which is the default), right and center. The width attribute allows you to specify the width of the table. You can set the width using pixel size or percent. Whether to use pixels or percent depends on what you are trying to accomplish. For the most part, percentage is the best choice. This allows your table to expand or contract along with the users window. cellspacing determines how much space there is between cells of your table. This works for both horizontal and vertical directions. The values are always set in pixels. cellpadding determines the distance between the content of a table cell and its border. This works for both horizontal and vertical directions and is also measured in pixels. cellspacing and cellpadding are used to space the content of a table. If you want to spread out your content in one direction only, you have to use other methods. The border attribute allows you to specify whether you want the border to show or not. You can set the width of the border by giving it a value in pixels. There are several border attributes that determine the look of the border. These will be covered later.

Cell Attributes

Table cells are denoted by <th></th> or <td></td>tags. The difference between the two is that tags are used for text headings, which appear in cells. Following is a list of table cell attributes:

• align- When used with a cell, the align attribute aligns the content of a cell. The possible values are left, right and center. You can also align the vertical placement with valign="top, middle, or bottom".
• width- You can specify the width of a table cell by using the width= "" attribute. The width is set in either pixels or percent, the percent being a percent of the table width. You can also set the height of your cell by using the height="" attribute. This does not work well with any of the browsers and is not recommended
• nowrap- this attribute will prevent your content from wrapping in a table cell. If your content is too wide to fit in the cell as specified, it will expand the cell to accommodate the text.
• colspan and rowspan- in the above table you can see that colspan allows a cell to combine with a cell next to it forming a larger cell. Rowspan acts the same, combining rows of the table.

Colour

You can specify the background colour of the table or particular cells in the table. If you want the table to be a colour and the cells to be a different colour that is also possible. The attribute is bgcolor="color". This attribute works in either the table tag or the cell tag, (<td>).

You can also specify the border colour with the bordercolor="color" attribute. In IE, you can be more specific with assigning border colour. You can use bordercolorlight and bordercolordark to specify colors for the light and dark areas of the border. The frame and rules attributes also affect the appearance of borders. Frame defines which sides of a tables outer border are rendered. The syntax is frame="value". The following is its values.

• above- renders along top edge only.
• below- renders along bottom edge
• border- renders all four sides
• box- also renders all four sides
• hsides- renders borders on top and bottom edges
• lhs- renders on left edge only
• rhs -renders on right side
• void- hides all borders
• vsides- renders on left and right sides

Rules are similar to frame. The difference is that rules define the borders on the inside of the table. The syntax is rules="value". The following is a list of the values.

• all- renders borders around each cell
• cols- renders borders between columns only
• groups- renders borders between cell groups
• none- hides all borders
• rows- renders borders between rows only

Background Attribute

Besides setting colour for the background of a table, you can also use a graphic. The syntax for this is background= "image.gif". In the 4.0 browsers, you can even use an animated gif as a background. This allows you to layer animated gifs which can be very useful.