HTML 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). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example

[HTML] <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> [/HTML]How the HTML code above looks in a browser:
______________________
|row 1, cell 1 | row 1, cell 2 |
-----------------------------------
|row 2, cell 1 | row 2, cell 2 |
------------------------------------



HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:
[HTML]<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table> [/HTML]HTML Table Headers

Header information in a table are defined with the <th> tag.
All major browsers will display the text in the <th> element as bold and centered.
[HTML] <table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</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> [/HTML]How the HTML code above looks in your browser:
_____________________
| header 1 | header 2 |
-----------------------------------
|row 1, cell 1 | row 1, cell 2 |
------------------------------------
|row 2, cell 1 | row 2, cell 2 |
------------------------------------

HTML 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 a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table