More About HTML Table

Okay lets get deeper on HTML tables now.

As I have said on the early part, html have tags and attributes. In order to declare or specify the behaviour of a certain html table's part, you will be needing to manipulate its attrbutes.

Here are some most commonly used table tags:

Attribute	Value	Description
bgcolor	rgb(x,x,x) #xxxxxx colorname	Tells the background color of the table
border	pixels	The border width of the table.
cellpadding	pixels %	The space between the cell walls and contents
cellspacing	pixels %	The space between cells
rules	none groups rows cols all	Displays the vertical and horizontal grid of the table. Note: Can only be used if the "border" attribute is specified, otherwise - no effect!
width	% pixels	Specifies the width of the table
background	(image's link location) pixels	Image background of the table

The table has also a feature function that enables the heading to automatically displayed in bold, which emphasize it. Though you can achieve the same display by using the <font> tag or with the <b> tag. But just to inform you, you can use the <th> (table heading) tag instead of <td> tag, for example:

<table border="1"> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> </tr> </table>

Heading 1	Heading 2	Heading 3

In relation, the <tr> and the <td> tag also have its own attribute, One of the most useful and common atrribute of the <tr> tag is the "valign" attribute, for example:

<tr valign="middle"></tr>

This specify the vertical alignment of a certain row, remember that the <tr> tag is a row tag.


MERGING CELLS IN HTML TABLE

The column tag's <td> "rowspan" and "colspan" is used to merge cells in an html table. This table's attribute is one of the most useful among web developers. It offers great flexibilty that enables web designers to develop layouts that would match to their needs.

Example:

<table border="1"> <tr> <th> Column 1 </th> <th> Column 2 </th> <th> Column 3 </th> </tr> <tr> <td rowspan="2"> Row 1 Cell 1 </td> <td> Row 1 Cell 2 </td> <td> Row 1 Cell 3 </td> </tr> <tr> <td> Row 2 Cell 2 </td> <td> Row 2 Cell 3 </td> </tr> <tr> <td colspan="3"> Row 3 Cell 1 </td> </tr> </table>

Now here's the output of the code above:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Didn't that makes our html table flexible? You should remember this two things as they will be very useful as long as you create tables in html.

So that's about the html table tag, lets take a look on other html tags on the next page.