Tables

Tables

Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the

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.

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

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:

Row 1, cell 1

Row 1, cell 2

Headings in a Table

Headings in a table are defined with the
tag.

Heading

Another Heading

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

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: 

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

Table Tags

Tag	Description
	Defines a table
		Defines a table header
Defines a table row
		Defines a table cell
Defines a table caption
Defines groups of table columns
Defines the attribute values for one or more columns in a table
Defines a table head
Defines a table body
Defines a table footer