Table
The basic approach with the table creation is that you represent tabular data in a linear fashion, specifying what data goes in which table cells using HTML tags. In HTML, tables are created from left to right and top to bottom. You start by creating the upper-left cell and finish with the bottom-right cell. This will all become clearer when you see some actual table code.
👉The <table> Element
All the components of a table are placed within a <table>.....</table> element. The basic part of a table (the <table> tag) are the caption (defined with the <caption> tag), header cells (<th>), data cells (<td>), and table rows (<tr>).
Syntax
<table>
..... table caption and contents .....
</table>
👉The <caption> Element
The caption element goes inside the <table> element just before that table rows, and it contains the title of the table. It close with with the </caption> tag. Caption are optional. You could use a regular paragraph or a heading as a caption for your table, tools that process HTML files can extract <caption > element into a separate file, automatically number them, treat them in special ways simply because they are captions.
Syntax
<table>
<caption> Title of the table </caption>
</table>
The <thead> Element
The table headings label the rows, columns, or both. Usually they are in an emphasized font that's different from the rest of the table. Creates a row group that defines heading of the table. A table can contain only one heading.
Syntax
<table>
<caption> Title of the table </caption>
<thead>
..... contents .....
</thead>
</table>
The <tbody> Element
The <tbody> ..... </tbody> element defines a body section within your table. Defines one or more row groups to include in the body of the table. Tables can contain more than one body section. The <body> start tag is required if at least one if the following is true:
- The table contains head or foot sections.
- The table contains more than one table body.
Syntax
<table>
<caption> Title of the table </caption>
<thead>
..... contains .....
</thead>
<tbody>
..... contains .....
<tbody>
</table>
The <tr>, <th>, <td> Elements
- <tr> ..... </tr>
Defines a table row, which can contain heading and data cells. Your table can have as many rows and columns as you like, but you should make sure that each row has the same number of cells so that columns lines up.
- <th> ..... </th>
Defines a table cell that contains a heading. Heading cells are usually indicated by boldface and centered both horizontally and vertically within the cell.
- <td> ..... </td>
Defines a table cell containing data. Table cells are in a regular font and are left-aligned and vertically centered within the cell.
Syntax - 1
<table>
<caption> Title of the table </caption>
<thead>
<tr>
<th> ..... </th>
<th> ..... </th>
<th> ..... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ..... </td>
<td> ..... </td>
<td> ..... </td>
</tr>
<tr>
<td> ..... </td>
<td> ..... </td>
<td> ..... </td>
</tr>
</tbody>
</table>
Syntax - 2
<table>
<caption> Title of the table </caption>
<tr>
<th> ..... </th>
<td> ..... </td>
<td> ..... </td>
</tr>
<tr>
<th> ..... </th>
<td> ..... </td>
<td> ..... </td>
</tr>
<tr>
<th> ..... </th>
<td> ..... </td>
<td> ..... </td>
</tr>
</table>
The <colgroup> Element
The <colgroup> ..... </colgroup> element is used to enclose one or more columns in a group. The closing </colgroup> tag is optional in HTML.
Syntax
<table>
<caption> Title of the table </caption>
<colgroup>
<thead>
..... contains .....
</thead>
<tbody>
..... contains .....
<tbody>
</table>
The <tfoot> Element
Creates a row group that defines the <tfoot> ..... </tfoot> element footer of the table. The starting <tfoot> tag is always required when defining the footer of the table. The closing <tfooter> tag is optional. A table can contain only one footer. Must be specified before the body of the table is rendered.
Syntax
<table>
<caption> Title of the table </caption>
<colgroup>
<thead>
..... contains .....
</thead>
<tbody>
..... contains .....
<tbody>
<tfoot>
..... cootains .....
</tfoot>
</table>
Example - (HTML Table)
<!DOCTYPE html>
<html>
<head>
<title> HTML Table </title>
</head>
<body>
<h2 style = "text-align: center"> Class Test Mark Sheet </h1>
<table>
<caption> Internal Exam Result </caption>
<thead>
<tr>
<th> Name </th>
<th> Mathematics </th>
<th> Physics </th>
<th> Chemistry </th>
</tr>
</thead>
<tbody>
<tr>
<td> Rahul Roy </td>
<td> 85 </td>
<td> 92 </td>
<td> 87 </td>
</tr>
<tr>
<td> Harry Wilson</td>
<td> 90 </td>
<td> 82 </td>
<td> 85 </td>
</tr>
<tr>
<td> Mrinal Sharma </td>
<td> 85 </td>
<td> 92 </td>
<td> 87 </td>
</tr>
</tbody>
</table>
</body>
</html>
NOTES.....
Closing tags are not required for <th>, <td>, and <tr> tags. And as long as your table data is clear without them, you can leave them out.