Apples 44% Bananas 23% Oranges 13% Other 10% Try it Yourself - Examples
Tables
How to define tables in an HTML document.
Table borders
This example demonstrates different table borders.
More examples at the bottom of the page. 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 Basic Notes - Useful Tips
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.
As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.
The trick is to insert a no-breaking space in the cell.
No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.
The no-breaking space entity starts with an ampersand ("&"),
then the letters "nbsp", and ends with a semicolon (";")
-----
Some text Some text
Some text
As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.
The trick is to insert a no-breaking space in the cell.
No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.
The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";")
05-03-2009, 11:54 AM
HTML Tables
Try it Yourself - Examples
to empty data cells, to make the borders visible: 
