how to create table in html?

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 caption
Awesome data

Comments

comments