HTML has ten table related tags. Here's the list with indicated if the element is defined in HTML 4.01 and/or HTML 5:
<caption> defines a table caption (4, 5)
<col> defines attributes for table columns (4, 5)
<colgroup> defines groups of table columns (4, 5)
<table> defines a table (4, 5)
<tbody> defines a table body (4, 5)
<td> defines a table cell (4, 5)
<tfoot> defines a table footer (4, 5)
<th> defines a table header (4, 5)
<thead> defines a table header (4, 5)
<tr> defines a table row (4, 5)
A basic table structure is the following:
It contains a caption, header, body and footer. The correct order of HTML elements is:
1. <table>
2. <caption>
3. <thead>
4. <tfoot>
5. <tbody>
According to definition and usage of w3schools, the element <tfoot> must appear before <tbody> within a table definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data (read more).
You can also use <col> and <colgroup> to define attributes for table columns or define group of table columns:
1. <table>
2. <caption>
3. <colgroup>
4. <col>
5. <thead>
6. <tfoot>
7. <tbody>
The following code is an example of a correct table structure:
<table border="1">
</table>
<caption>Table caption here</caption>
<colgroup span="1" style="background:#DEDEDE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>
<!-- Table Header-->
<thead>
<!-- Table Body-->
<tbody>
<colgroup span="1" style="background:#DEDEDE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>
<!-- Table Header-->
<thead>
<tr>
</thead><th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr><th>Head 2</th>
<th>Head 3</th>
<!-- Table Footer-->
<tfoot><tr>
</tfoot><td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr><td>Foot 2</td>
<td>Foot 3</td>
<!-- Table Body-->
<tbody>
<tr>
<tr>
</tbody><td>A</td>
<td>B</td>
<td>C</td>
</tr><td>B</td>
<td>C</td>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr><td>E</td>
<td>F</td>
</table>
The result on a browser is the following:
align and bgcolor attributes of the table are deprecated, so in HTML 5 no table attributes are supported. Obviously you can use style sheet to customize the style of each table element.
For a more detailed articles about HTML tables read this interesting post: w3 Introduction to tables
That's all. Do you have any suggestion about this topic? Please leave a comment, thanks.
No comments:
Post a Comment