Tables can be used to lay out information in a clear and easily understandable format, but you can also use tables for arranging the layout of the elements that make up pages.
Creating Tables
Tables are created with the <table> ... </table> tag. A table contains rows and columns.
- The rows are created with the <tr> tag.
- The columns are defined with the <td> tag, within the "tr" element.
Here is a table defined with the minimum elements (having two rows and two columns):
<table border="1" style="border-color:blue;">
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2</td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>
- The "border" attribute sets the width (in pixels) of the border. The "style" is used here to define the border color.
The code above will display the following table:
| Row 1 - Column 1 |
Row 1 - Column 2 |
| Row 2 - Column 1 |
Row 2 - Column 2 |
The table structure
The table element contains also other tags to form the table structure, used to group the rows and the columns.
Table tags:
- <tr> ... </tr> - defines a table row. The <tr> tag contains the cells (td) of the row.
- Attributes - the standard attributes: id, class, and style. Specific attributes:
- align="left | right | center | justify" - specifies the horizontal alignment of text in the cell(s) (Deprecated).
- valign="top | middle | bottom | baseline" - specifies the vertical alignment of text in the cells (Not in HTML5).
- <td> ... </td> - defines a table cell.
- Attributes - the standard attributes: id, class, and style. Specific attributes:
- align="left | right | center | justify" - specifies the horizontal alignment of text in the cell (Deprecated).
- colspan="number" - sets the number of columns the current cell should span.
- rowspan="number" - sets the number of rows spanned by the current cell.
- valign="top | middle | bottom | baseline" - specifies the vertical alignment of text in the cells (Not in HTML5).
- <th> ... </th> - defines a table header cell.
- Accepts the same attributes as the "td" element.
- <thead> ... </thead> - groups the header content in a table.
- <tfoot> ... </tfoot> - defines a table footer.
- <tbody> ... </tbody> - groups the body content in a table.
- <caption> ... </caption> - defines a table caption. It must follow the table start tag and precede all other table elements.
- <colgroup></colgroup> - defines a group of columns in a table, for formatting.
- Attributes - the standard attributes: id, class, and style. Specific attributes:
- align="left | right | center | justify" - specifies the horizontal alignment of text in a cell or cells (Deprecated).
- span="number" - sets the number of columns a col element should span
- valign="top | middle | bottom | baseline" - specifies the vertical alignment of text in the cells of a column (Not in HTML5).
- width="value" - (value can be in pixels [px] or percents [%]) specifies the width of a col element (Not in HTML5).
- <col /> - defines attribute values for one or more columns, so that attribute properties may be applied to all the cells in the column(s).
- It can use the same attributes as "colgroup" element.
- This element must appear after the caption element and before any row (tr) or row group (thead, tbody, tfoot).
• The "align" attribute is Deprecated, but still suported in all major browsers. You can use CSS style instead.
- Center-aligns the table: <table style="margin:1px auto;">
- Left-aligns the table: <table style="margin-left:0px;">
- Right-aligns the table: <table style="margin:margin:1px 0px 1px auto;">
Examples:
1. In the next example you can see the result of the <th> tag, the "rowspan" and "colspan" attributes.
<table border="1" style="margin:1px auto; border-color:blue; text-align:center;">
<tr>
<th>Title 1</th>
<th>Title 2</th>
</tr>
<tr>
<td>Row 2 - Cell 1</td>
<td>Row 2 - Cell 2</td>
</tr>
<tr>
<td colspan="2">Row 3 - Cells 1 and 2</td>
</tr>
<tr>
<td rowspan="2">Rows 4 and 5 - Cell 1</td>
<td>Row 4 - Cell 2</td>
</tr>
<tr>
<td>Row 5 - Cell 2</td>
</tr>
</table>
This code will display:
| Title 1 |
Title 2 |
| Row 2 - Cell 1 |
Row 2 - Cell 2 |
| Row 3 - Cells 1 and 2 |
| Rows 4 and 5 - Cell 1 |
Row 4 - Cell 2 |
| Row 5 - Cell 2 |
2. Table with thead and tfoot.
<table border="1" style="margin:1px auto; border-color:blue;">
<thead style="text-align:center">
<tr>
<th>Web site</th>
<th>Description</th>
</tr>
</thead>
<tfoot style="text-align:center;">
<tr><td colspan="2">Web sites with free resources.</td></tr>
</tfoot>
<tr>
<td>marplo.net</td>
<td>Web development, foreign languages, anime and games</td>
</tr>
<tr>
<td>coursesweb.net</td>
<td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
</tr>
</table>
- Not all major browsers suport the <tfoot> tag.
This code will display:
| Web site |
Description |
| Web sites with free resources. |
| marplo.net |
Web development, foreign languages, anime and games |
| coursesweb.net |
Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript |
3. Table with thead and colgroup.
<table border="1" style="margin:1px auto; border-color:blue;">
<colgroup style="width:45px;"></colgroup>
<colgroup span="2" style="background-color:#daf8de;"></colgroup>
<thead style="text-align:center;">
<tr>
<th>ID</th>
<th>Web site</th>
<th>Description</th>
</tr>
</thead>
<tr>
<td>01 </td>
<td>marplo.net</td>
<td>Web development, foreign languages, anime and games</td>
</tr>
<tr>
<td>02 </td>
<td>coursesweb.net</td>
<td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
</tr>
</table>
- Notice that the second colgroup element spans two columns.
The example above will create the following table:
| ID |
Web site |
Description |
| 01 |
marplo.net |
Web development, foreign languages, anime and games |
| 02 |
coursesweb.net |
Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript |
4. Table with caption, thead, and tbody.
<table border="1" style="margin:1px auto; border-color:green;">
<caption><b>Web sites with free Web Development resources</b></caption>
<thead style="background-color:#deedfe; text-align:center;">
<tr>
<th>Web site</th>
<th>Description</th>
</tr>
</thead>
<tbody style="background-color:#fdfefe; color:blue;">
<tr>
<td>marplo.net</td>
<td>Web development, foreign languages, anime and games</td>
</tr>
<tr>
<td>coursesweb.net</td>
<td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
</tr>
</tbody>
</table>
- Notice that insite caption element is added a <b>, this means that you can add formatting tags inside <caption>.
This code will display:
Web sites with free Web Development resources
| Web site |
Description |
| marplo.net |
Web development, foreign languages, anime and games |
| coursesweb.net |
Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript |
Table attributes
The following attributes can be used in the <table> tag (along with the standard attributes: id, class, and style):
- align="left | right | center | justify" - specifies the horizontal alignment of text in the cell(s) (Deprecated).
- bgcolor="color" - Specifies a background color for the entire table.
- border="number" - Specifies the width (in pixels) of the border around the table and its cells (Not in HTML5).
- cellpadding="number" - Sets the amount of space, in number of pixels, between the cell border and its contents (default value is 1).
- cellspacing="number" - Sets the amount of space (in number of pixels) between table cells (default value is 2).
- frame="void | above | below | hsides | lhs | rhs | vsides | box | border"
- Specifies where to draw borders around the table:
- void - The outside borders are not shown.
- above - Top side only.
- below - Bottom side only.
- hsides - Top and bottom sides only.
- 1hs - The left outside border is shown.
- rhs - The right outside border is shown.
- vsides - Right and left sides only.
- box - All four sides.
- border - All four sides.
- rules="all | cols | groups | none | rows" - Specifies which parts of the inside borders that should be visible.
- all - Lines between all rows and columns
- cols - Lines between columns only
- groups - Lines appear between row groups (thead, tfoot, and tbody ) and column groups.
- none - No lines (default).
- rows - Lines appear between rows only
- summary="text" - Provides a summary of the table contents for use with nonvisual browsers.
- width="value" - (in pixels [px] or percents [%]) Specifies the width of the entire table (Not in HTML5).
In the next example you can see the result of the "width", "cellspacing", "cellpadding", "frame" and "rules":
<table border="2" width="80%" cellspacing="0" cellpadding="5" frame="below" rules="rows" style="margin:1px auto; border-color:blue; text-align:center;">
<tr style="background-color:#daedf8;">
<th>Web site</th>
<th>Description</th>
</tr>
<tr>
<td>marplo.net</td>
<td>Web development, foreign languages, anime and games</td>
</tr>
<tr>
<td>coursesweb.net</td>
<td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
</tr>
</table>
This code will display:
| Web site |
Description |
| marplo.net |
Web development, foreign languages, anime and games |
| coursesweb.net |
Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript |
• A table cell (<td>) may contain any content: images (<img>) paragraps (<p>), lists (<ul>, <li>), DIVs (<div>), including another table.
Example:
<table border="0">
<tr><td>
<p>This is a paragraph,<br />
next, an image.</p>
<img src="dir/image.jpg" alt="Text" />
</td></tr>
</table>