Table structure in HTML is simple to learn; once you understand what does they mean? like <tr>, <td>, <th>, <caption>, and others; let's have a look.
! Alert: Keep in mind to write between opening and closing tags.
<table> </table> : All the table codes fall between these two, opening and closing tags of the table.
<caption> </captions> : First child of <table>, describe the table, for example, "Table for vegetables"
<colgroup><col> </col> </colgroup> : Child of <table>, describe the grouping of columns, comes before <thead>, <tbody>, and <tfoot> .
Example:
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<thead> </thead> : Child of <table>, comes after <caption> and <colgroup>; and It is the head for <tbody> , so comes before <tbody> and <tfoot>
<tbody> </tbody> : Child of <table>, comes after <caption>, <colgroup> and <thead>. And between its opening and closing tags run <tr> <th> </th> <td> </td> </tr>. So this is the main body to work with.
<tr> </tr> : It is table row, horizontal like this -------------. It is child of <table>, <thead>, <tbody> and <tfoot>
<td> </td> : It is child of the row ( <tr> </tr>), and called table data; it ever comes between the opening and closing tags of table row.
<th> </th> : "h" stands for head or heading, it turns the text in "bold." It is also child of row (<tr> </tr>); and like <td>, it also comes between opening and closing tags of table row.
<tfoot> </tfoot> : Child of <table> , used for footer message or data. It comes at last after <caption>, <thead> and <tbody> tags.
Attribute of <th> and <td>
rowspan : for example <td rowspan="2"> Text </td> /* It'll merge two rows */
colspan : for example <td colspan="2"> Text </td> /* It'll merge two columns */
In sum up:
<table>
<caption> Caption for table </caption>
<colgroup><col> </col> </colgroup>
<thead> <tr> <td></td><td></td></tr></thead>
<tbody> <tr> <td></td><td></td></tr></tbody>
<tfoot> <tr> <td></td><td></td></tr></tfoot>
</table>
Comments
Post a Comment