Table In HTML

Table Element

The <table> element us used to display the data in form of rows and column. In HTML table consist on <table> <tr>, <th>, and <td> elements.

Following are the Some Elements and attribute of the Table tag in HTML.

 Attribute of The <table> Element

You can also use some attribute with <table> element

 Align: Align the table center/left/right for example align="center" Not supported in HTML5

 Border: Show The border of Table its value is any number for example border="1px" or border=1 or border="1" or border="1px"

 bgcolor : Specifies the background color for a table value may be rgb(x,x,x) or #xxxxxx or colorname (Not supported in HTML5). for example bgcolor="Yallow"

 cellpadding : Specifies the space between the cell wall and the cell content for example cellpadding="1px" (Not supported in HTML5)

width : Specifies the width of a table. Sets the table’s width in pixels or as a percentage. for example width="40%" or width="300px"

Structure of HTML Table

In HTML Table construct with Basic <Table> element and some other element which are <tr>, <th>, <td> and <caption> element

Where

    <caption> is used to diplay the title of the Table. for example <caption> This is a Table </caption> we also use align attribute with <caption>.

  • <thead> is used for header element of the table. The first row of the table contain the titles of columns.

  • <Tbody> contain the rows and cell which contain the actual data.

  • <tr> element is used to create a new row of the table.

Attribute of The <tr> Element

align : aligns text in table cells contained inside tr element

bgcolor :defines the background color of the tr

char :sets the character to which cell contents inside the table row should align

charoff :defines the number of characters by which cell contents will be offset from the char

valign :aligns text vertically in table cells contained inside a tr element

  • <td> element is used to define the column of the table which contain the actual data.

 Attribute of The <td> Element

 abbr :provides an abbreviated version of the td contents
align :aligns text in cells contained inside a td element
bgcolor :sets a background color for the td
colspan :defines number of columns in table that a cell should span
headers :indicates which table headers are related to this cell
nowrap :instructs the browser not to wrap content inside the cell
rowspan :defines the number of rows in table that cell should span
scope :specifies the direction of the table cells that the cell relates to
valign :aligns text vertically in table cells
width :sets the td’s width in pixels or as a percentage

  • <tfoot> element is used to define the footer element of the table. The <tfoot> must be place after <thead> and before <tbody> element but display in the bottom of the table for example calculate the total below the column .

Now we explain Each element with examples:


<html>
<body>
 <table>
<caption>Product and Its Details </caption>
 	<thead>
		<tr>
			<th>Product Name</th>
			<th>Price</th>
			<th>quantity</th>
		</tr>
	</thead> 
<tfoot>
		<tr>
		<th>Product Name</th>
		<th>Price</th>
		<th>quantity</th>
		</tr>

</tfoot>
<tbody>
		<tr>
			<td>TV</td>
			<td>10000</td>
			<td>20</td>
		</tr>
		<tr>
			<td>Tables</td>
			<td>4000</td>
			<td>30</td>
		</tr>
		<tr>
			<td>LCD</td>
			<td>34000</td>
			<td>12</td>
		</tr>
</tbody>
</table>
</body>
</html>


Placing of <tfoot> element in HTML

Remember if you use <tfoot> and </tfoot> befor <tbody> element then its display on each page as last row of the table. but if you put <tfoot>...</tfoot> after the <tbody> its display only at the last page.

This example will display :

Product and Its Details
Product Name  Price quantity
Product Name  Price quantity
TV  10000  20
Tables 4000  30
LCD 34000 12