Summary -
In this topic, we described about the <table> tag along with detailed example.
Table in the HTML document. The <table> tag represents a table in an HTML document. <table> tag is a combination of table header (<th>), rows (<tr>) and tables cells (<td>).
A table is used to present data that has more than one dimension. The tag can be specified like <table></table> with the table elements in between the opening and closing tags.
The <table> tag can contain child elements are optionally a <caption> tag, followed by zero or more <colgroup> tags, <thead> tag, <tfoot> tag, <tbody> tags or one or more <tr> tags, <tfoot> tag, intermixed with one or more script-supporting elements tag.
Syntax -
<table>.... </table>
Optional Attributes -
Attribute | Description | Values |
---|---|---|
Align | Specifies the table alignment according to the surrounding text.Not supported in HTML5 | LeftCenterright |
Bgcolor | Specifies the table background color.Not supported in HTML5 | Rgb(x,x,x)#xxxxxxColorname |
Border | Specifies the table being used for layout purpose or not | 10 |
Cellpadding | Specifies space between the cell wall and cell content.Not supported in HTML5 | Number/fixels |
Cellspacing | Specifies the space between cells.Not supported in HTML5 | Number/fixels |
Frame | Specifies the outside borders parts that should be visible.Not supported in HTML5 | VoidAboveBelowHsidesVsidesBoxBorder |
Rules | Specifies the inside borders parts that should visible.Not supported in HTML5 | NoneGroupsRowsColsAll |
Sortable | Specifies table should be sortable | Sortable |
Summary | Specifies the table content summary.Not supported in HTML5 | Text |
Width | Specifies table width.Not supported in HTML5 | Pixels/5 |
Example -
<!DOCTYPE html>
<html>
<head>
<title> Table element example.. </title>
</head>
<body>
<table>
<thead>
<tr>
<th>Employee</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>$10000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Pawan</td>
<td>$5000</td>
</tr>
<tr>
<td>Srinivas</td>
<td>$5000</td>
</tr>
</tbody>
</table>
</body>
</html>
Output -
Employee | Salary |
---|---|
Total | $10000 |
Pawan | $5000 |
Srinivas | $5000 |