Tables

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

< table border= "1" >

< 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 >
How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

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

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


Headings in a Table

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

< 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 >
How it looks in a browser:

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Empty Cells in a Table

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

row 1, cell 1	row 1, cell 2
row 2, cell 1

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1

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

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

< 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 >

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1