Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr>, and each row is divided into data cells (with the <td> tag). A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Code:

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

Save your work and then open it with an internet browser.

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders.

To display a table with borders, you will have to use the border attribute:

Code:

<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

Now save again and have a look again.

Headings in a Table

Headings in a table are defined with the <th> tag.

Code:

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

Save and look again and see what you have done.

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

Code:

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>

Note that the borders around the empty table cell are missing (Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible.

Code:

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>&nbsp;</td> </tr> </table>

Have a final look!

Hope this helps you guys out...

_________________

90% of teens today would die if Myspace or Bebo had a system failure and was completely destroyed. If you are one of the 10% that would be laughing, copy and paste this to your signature.