Summary -

In this topic, we described about the HTML Tables in detail.

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>

The tags used can be explained in detail below -

TagTag Description
<th>specify a header cell in HTML <table>.
<tr>Specify the row in an HTML <table>
<td>Represents a cell in an HTML <table>.
<colgroup>Represent a group of columns within a table.
<thead>Specify the block of header rows in an HTML <table>.
<tfoot>Specify the summary of the columns of an HTML <table>.
<tbody>Represents the row blocks that consist of table body data.

Optional Attributes -

AttributeDescriptionvalues
AlignSpecifies the table alignment according to the surrounding text.Not supported in HTML5.LeftCenterRight
BgcolorSpecifies the table background color.Not supported in HTML5.Rgb(x,x,x)#xxxxxxColorname
BorderSpecifies the table being used for layout purpose or not10
CellpaddingSpecifies space between the cell wall and cell content.Not supported in HTML5.Number/fixels
CellspacingSpecifies the space between cells.Not supported in HTML5..Number/pixels
FrameSpecifies the outside borders parts that should be visible.Not supported in HTML5.VoidAboveBelowHsidesVsidesBoxBorder
RulesSpecifies the inside borders parts that should visible.Not supported in HTML5.NoneGroupsRowsColsAll
SortableSpecifies table should be sortableSortable
SummarySpecifies the table content summary.Not supported in HTML5.Text
WidthSpecifies 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