Programmers Kit

Tables in HTML allow a user to present information in a more organized manner. Tables can be a complicated process because a lot of information is required to define the layout and appearance of a table. The table structure must be specified, rows and columns. The table starts with a <table> tag - followed by a two-sided <tr> (table row) tag, followed by <td> (table data). So the code for a basic html table with two rows an two columns would look like:

 

<table>

<tr>

<td>Column 1</td>

<td>Column 2 </td>

</tr>

<tr>

<td>Column 3 </td>

<td>Column 4 </td>

</tr>

</table>

This would produce:

Column 1	Column 2
Column 3	Column 4

There is also the <th> which is a optional header cell tag in which the cell markup is centered and bold.

Attributes of the <table> tag:

border = “number ” (applies a border, eh?)

cellpadding = “ number ” Cellpadding is the space between the content of the cell and the border. The default value is 1.

cellspacing=”number” Cellspacing is the space between table cells. The default value is 2.

align = “left | right | center” aligns the table in relation to the page default value is left .

bgcolor = “color | hexadecimal value” sets background color of table. The default value is transparent.

background = “imageName.gif” inserts background image. There is no default value.

bordercolor = “color | hexadecimal value” sets border color of table. The default value is black.

width = “number | %” sets width of table

height = “number” sets height of table. There is no default value. This attribute is not part of W3C recommendations.

rules = “none | rows | cols | groups | all” sets internal borders inside table. The default value is all. This is not fully supported – you may not get the results you anticipate.

Attributes of the <tr> tag:

bgcolor = “color | hexadecimal value” sets background color of row. The default value is transparent .

align = “left | center | right” aligns content in relation to the table cell. The default value is left.

valign = “top | middle | bottom” aligns content vertically in relation to the cell. The default value is middle.

id = “ name_of_id ”

class = “ name_of_class ” apply a stylesheet class or id to row

Attributes of the <td> tag:

bgcolor = “color | hexadecimal value” sets background color of row. The default value is transparent .

align = “left | center | right” aligns content in relation to the table cell. The default value is left.

valign = “top | middle | bottom” aligns content vertically in relation to the cell. The default value is middle.

id = “ name_of_id ”

class = “ name_of_class ” apply a stylesheet class or id to row

Borders: By default, browsers do not show borders around the tables. You can create a border using CSS, or by using the border attribute within the HTML tag as follows:

<table border=”1″>

Of course, you can always up the value of the border. In this example, I am giving a border of 5: This would produce:

Column 1	Column 2
Column 3	Column 4

Filed under: HTML