Thee format of HTML Tables was proposed in the HTML 3.0 Drafts and the later RFC 1942 HTML Tables. They were inspired by the CALS Table Model. Some elements in these proposals were included in HTML 3.2; the present form of HTML Tables was standardized in HTML 4. (Many of the elements used within tables are neither block nor inline elements.)
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.
HTML Table Details :
<table>…</table> Identifies a table. Several HTML attributes are possible in HTML Transitional, but most of these are invalid in HTML Strict and can be replaced with style sheets. The summary attribute is however informally required for accessibility purposes, though its usage is not simple. Proposed in the HTML 3.0 Drafts; Standardized in HTML 3.2; still current. <tr>…</tr> Contains a row of cells in a table. Proposed in the HTML 3.0 Drafts; Standardized in HTML 3.2; still current. <th>…</th> A table header cell; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items. Proposed in the HTML 3.0 Drafts; Standardized in HTML 3.2; still current. <td>…</td> A table data cell. Proposed in the HTML 3.0 Drafts; Standardized in HTML 3.2; still current. <colgroup>…</colgroup> Specifies a column group in a table. Proposed in HTML Tables; Standardized in HTML 4.0; still current. <col> or <col/> Specifies a column in a table. Proposed in HTML Tables; Standardized in HTML 4.0; still current. <caption>…</caption> Specifies a caption for a table. Proposed in the HTML 3.0 Drafts; Standardized in HTML 3.2; still current. <thead>…</thead> Specifies the header part of a table. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media). Proposed in HTML Tables; Standardized in HTML 4.0; still current. <tbody>…</tbody> Specifies a body of data for the table. Proposed in HTML Tables; Standardized in HTML 4.0; still current. <tfoot>…</tfoot> Specifies the footer part of a table. Like <thead>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media). Proposed in HTML Tables; Standardized in HTML 4.0; still current.
HTML Table Summary:
Use the HTML <table> element to define a table Use the HTML <tr> element to define a table row Use the HTML <th> element to define a table heading Use the HTML <td> element to define a table data Use the HTML <caption> element to define a table caption Use the CSS border property to define a border Use the CSS border-collapse property to collapse cell borders Use the CSS padding property to add padding to cells Use the CSS text-align property to align cell text Use the CSS border-spacing property to set the spacing between cells Use the colspan attribute to make a cell span many columns Use the rowspan attribute to make a cell span many rows Use the id attribute to uniquely define one table
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells
Example:
<!DOCTYPE html> <html> <head> <title>HTML Tables</title> </head> <body> <table border="1"> <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> </body> </html>
More Examples:
<p>Simple table with header</p> <table> <tr> <th>First name</th> <th>Last name</th> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table> <p>Table with thead, tfoot, and tbody</p> <table> <thead> <tr> <th>Header content 1</th> <th>Header content 2</th> </tr> </thead> <tfoot> <tr> <td>Footer content 1</td> <td>Footer content 2</td> </tr> </tfoot> <tbody> <tr> <td>Body content 1</td> <td>Body content 2</td> </tr> </tbody> </table> <p>Table with colgroup</p> <table> <colgroup span="4"></colgroup> <tr> <th>Countries</th> <th>Capitals</th> <th>Population</th> <th>Language</th> </tr> <tr> <td>USA</td> <td>Washington D.C.</td> <td>309 million</td> <td>English</td> </tr> <tr> <td>Sweden</td> <td>Stockholm</td> <td>9 million</td> <td>Swedish</td> </tr> </table> <p>Table with colgroup and col</p> <table> <colgroup> <col style="background-color: #0f0"> <col span="2"> </colgroup> <tr> <th>Lime</th> <th>Lemon</th> <th>Orange</th> </tr> <tr> <td>Green</td> <td>Yellow</td> <td>Orange</td> </tr> </table> <p>Simple table with caption</p> <table> <caption>Awesome caption</caption> <tr> <td>Awesome data</td> </tr> </table>
This will produce following result:
Simple table with header
First name | Last name |
|---|---|
John | Doe |
Jane | Doe |
Table with thead, tfoot, and tbody
Header content 1 | Header content 2 |
|---|---|
Footer content 1 | Footer content 2 |
Body content 1 | Body content 2 |
Table with colgroup
Countries | Capitals | Population | Language |
|---|---|---|---|
USA | Washington D.C. | 309 million | English |
Sweden | Stockholm | 9 million | Swedish |
Table with colgroup and col
Lime | Lemon | Orange |
|---|---|---|
Green | Yellow | Orange |
Simple table with caption
Awesome data |
