HTML Tables
HTML Tables
| 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 <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">
<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:
| 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.
<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 |
|
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 |
|
Basic Notes - Useful Tips
The <thead>,<tbody> and <tfoot> 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.
|
More Examples |
Table with no border
This example demonstrates a table with no borders.
Headings in a table
This example demonstrates how to display table headers.
Empty cells
This example demonstrates how to use " " to handle
cells that have no content.
Table with a caption
This example demonstrates a table with a caption.
Table cells that span more
than one row/column
This example demonstrates how to define table cells that span more than
one row or one column.
Tags inside a table
This example demonstrates how to display elements inside other elements.
Cell padding
This example demonstrates how to use cellpadding to create more white space
between the cell content and its borders.
Cell spacing
This example demonstrates how to use cellspacing to increase the distance
between the cells.
Add a background color
or a background image to a table
This example demonstrates how to add a background to a table.
Add a background
color or a background image to a table cell
This example demonstrates how to add a background to one or more table cells.
Align the content in a table
cell
This example demonstrates how to use the "align" attribute to align
the content of cells, to create a "nice-looking" table.
The frame attribute
This example demonstrates how to use the "frame" attribute to control
the borders around the table.
The frame and border attributes
How to use the "frame" and "border" attributes to control the borders around the table.
Table Tags
| Tag |
Description |
| <table> |
Defines a table |
| <th> |
Defines a table header |
| <tr> |
Defines a table row |
| <td> |
Defines a table cell |
| <caption> |
Defines a table caption |
| <colgroup> |
Defines groups of table columns |
| <col> |
Defines the attribute values for one or more columns in a table |
| <thead> |
Defines a table head |
| <tbody> |
Defines a table body
|
| <tfoot> |
Defines a table footer
|
Whether you're new to XML or already an advanced user,
the user-friendly views and powerful entry helpers,
wizards, and debuggers in XMLSpy are designed to meet your XML
and Web development needs from start to finish.
New features in Version 2010!
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- XBRL validator, taxonomy editor, taxonomy wizard
- Support for Office Open XML (OOXML)
- Graphical WSDL 1.1/2.0 editor & SOAP debugger
- JSON editing & conversion
- Java, C#, C++ code generation
- And much more!
Download a free trial today!
|
|
|
|
