HTML table tag - Introduction, Syntax and Examples

HTML table tag is used to display the table type of data on the web page. It is represented by <table> tag.

A table is a collection of rows. A row is represented by <tr> tag. tr stands for table row.

Each row is a collection of cells. A cell is represented by <td> tag. td stands for table data

Inside the <table> tag, we have to use <tr>; Inside the <tr> tag, we have to use <td>.

If the cell is representing the column heading, you can use <th> tag, instead of <td> tag. th stands for table header.

<caption> tag is used to specify a title for the table.

<table>, <tr>, <th>, <td> and <caption> tags are paired tags. Paired tags refers to tags which contains both starting tag as well as ending tag.

Syntax of HTML table tag

<table>

<tr>

<td> Data Here </td>

<td> Data Here </td>

.....

.....

</tr>

.....

.....

</table>

Examples of HTML table tag

<table border="1">    

<tr>     

<td>One</td>     

<td>Two</td>    

</tr>    

<tr>     

<td>Three</td>     

<td>Four</td>    

</tr>    

<tr>     

<td>Five</td>     

<td>Six</td>    

</tr>   

</table> 

OUTPUT

One	Two
Three	Four
Five	Six

Attributes of HTML table tag

border

<table border="0"> i.e. border is 0 means no border

<table border="1"> i.e. border is 1 means with border

cellpadding

<table cellpadding="n px"> specifies number of pixels distance between cell border and cell content.

Attributes of <th> or <td> tag

rowspan

<td rowspan="n"> specifies the number of rows to merge.

colspan

<td colspan="n px"> specifies the number of pixels distance between cell border and cell content.

Complex table - Heading, Body, and Footer attribute

Above we had discussed an example of a simple HTML table. For designing complex tables with various fields we need to specify the heading, body, and footer of the table.

This can be done by using <thead>, <tbody>, and <tfoot> elements in the HTML tables. These three elements are used in conjunction with each other to specify each part of a table.

<thead> is used to group header content in the HTML table. <tbody> is used to group body content in the table and <tfoot> is used to group footer content in HTML tables.

Each element must have two or more <tr> tags inside it. These elements are not affecting the table by default. You can use CSS in order to specify styles of each category mentioned above.

<thead>, <tbody>, and <tfoot> elements supports the following attributes in HTML 4.01.

align

align attribute is used to align the text or images inside these elements. Values used under the align attribute are left, right, center, justify and char. 

char

char attribute is used to align the content inside these elements to a character. Values used in char attribute is in character form.

charoff

charoff attribute is used to set the number of characters the contents inside these elements will be aligned from the character specified by the char attribute. Values used in charoff is in number form.

valign

valign attribute is used to vertically align the contents inside these elements. Values used under valign attribute are top, middle, bottom, and baseline.

Note: align, char, charoff and valign attributes are not supported in HTML 5. Thus, you need to modify CSS in order to achieve these objectives.