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>.

<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

Select The HTML Tutorials

HTML Tutorials

HTML Forms

HTML DECIMAL Color Code and HEX Color Code

HTML Nested Lists

Elements and Tags In HTML

4 Primary Tags In HTML

Create Your First Web Page in HTML

Attributes in HTML Tags

HTML DOCTYPE Declaration

HEAD Tag in HTML

Meta Tags in HTML

Body Tag in HTML

H1 to H6 HTML Elements

Basic HTML Elements

HTML Table Element

Basefont HTML Element

Formatting Element in HTML

Font Element In HTML

Style Element in HTML

CSS Properties

DIV in HTML Document

List in HTML

Creating Menus With HTML list

Creating Horizontal Menu With HTML list

HTML Image Tag

Hyperlinks In HTML