HTML Tables

Presented By :- Onkar Kale

HTML Tables

➢ HTML tables allow web developers to arrange data into rows and
columns.
➢ A table in HTML consists of table cells inside rows and columns
➢ An HTML table is defined with the “table” tag. Each table row is
defined with the

➢ Syntax:- <table></table>
<tr> Tag
➢ tr stands for table row.
➢ Each table row starts with a <tr> and end with a </tr>
tag.

➢ The style attribute assigns a background to the <tr>

elements.
<td> Tag
➢ td stands for table data.
➢ Each table cell is defined by a <td> and a </td> tag.
➢ table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text,
images, lists, other tables, etc.
➢ Example :- <td>Emil</td>
HTML <th> Tag
➢ The <th> tag in HTML is used to set the header cell of a table.
➢ Two types of cells in the HTML table.
➢ Header Cell: It is used to hold the header information.
➢ Standard Cell: It is used to hold the body of data.
➢ The working of both tags (<th> and <td>) are the same, but the
text properties are different. In <th> text is bold and centered, and
in <td> text is regular and left align by default.
HTML <caption> Tag
The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table>

tag.

By default, a table caption will be center-aligned above a table.

However, the CSS properties text align can be used to align and
place the caption.
Example Caption Tag
<table>
<caption>Monthly sessions</caption>
<tr>
<th>Month</th>
<th>Sessions</th>
</tr>
<tr>
<td>March</td>
<td>22</td>
</tr>
</table>
HTML <colgroup> Tag
The <colgroup> tag specifies a group of one or more columns in a
table for formatting.

The <colgroup> tag is useful for applying styles to entire

columns, instead of repeating the styles for each cell, for each row.

To define different properties to a column within a <colgroup>,

use the <col> tag within the <colgroup> tag.
Example of colgraph
<table>

<colgroup>

<col span="1" style="background-color:red">

<col style="background-color:yellow">

</colgroup>

<tr>

<th>No</th>

<th>title</th>

</tr>

<tr>

<td>1</td>

<td>Smart Watch</td>

</tr>

</table>
 HTML <thead> Tag
➢ The <thead> tag is used to group header content in an HTML
table.
➢ The <thead> element is used in conjunction with the <tbody>
and <tfoot> elements to specify each part of a table (header,
body, footer).
➢ The <thead> element must have one or more <tr> tags inside.
<table>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>