HTML Tables
Apples
44%
Bananas
23%
Oranges
13%
Other
10%
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 , and elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.
Table Tags
Tag
Description
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
Basic Notes - Useful Tips
The |
---|
Defines a table
Defines a table row
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
Defines a table header
|
---|
Defines a table cell
|
Defines a table caption
0 comments:
Post a Comment