HTML Table Tag

Tables are used in html to show Tabular data. HTMl Table is defined with the <table> tag and then table row <tr> and cells <td>. Till 2005, whole webpage was build using table element, but later or Div Based Layouts becomes popular.

HTML Table Example

row 1 - cell 1, row 1 - cell 2,
row 2 - cell 1, row 2 - cell 2,
		
<table>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Table Tags List

Here is a list of Tags used in table. Table is started with <table> tag. Inside table tag, we can have rows <tr> and columns <td>. Here s a list of tags used in table.

Tag Name Description
<table> Defines a table Element
<tr> Defines a table row
<td> Defines a table cell or table data
<th> Defines a table header cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Table Attributes

Here is a list of attributes of table tag. All presentational attributes are not used in Html5. border="1" gives warning in W3C validations, but border more than 1 gives error. Best practise is to use border in css.

AttributeUse
widthwidth of table or table cell Removed in html5
heightheight of table or table cell Removed in html5
alignalign text in table Removed in html5
valignvertically align text in table cell Removed in html5
borderborder width of table in px Removed in html5
bgcolorbackground color of table Removed in html5
cellspacinggap between table cells Removed in html5
cellpaddinggap inside table cells Removed in html5
colspanused to group columns in same row.
rowspanused to group columns in next row.


Table Caption

caption element is used inside table to add caption or title of table. Default text-align of caption is center. Caption tag is always used as First Children of table element. Thus tr, thead or tbody are used after caption.

Table Caption
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


<table>
   <caption>Table Caption<caption>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Table Width

In HTML table, width attribute is used to set width of table. In HTML5, width attribute is removed. CSS Width property is used to set width of table in html5. Width Attribute can also overflow table in mobile devices as screen width is lesser than table width.

Deprecated in HTML5, use css width.

How to set width of table.

Table with width 300
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


<table width="300">
   
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Table Border

Table Border attribute is used to display border of table. Border attribute's value specify the width of border. Default table border is zero. Table border can have any numeric value.

Deprecated in HTML5, use css border.

Table Border Examples

Table border 1

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2



<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Table border 5

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2



<table border="5">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Cellspacing


cellspacing attribute in table is used to set margin between table cells and table border. Default cellspacing is 2. Using cellspacing attribute, we can change margin between two cells.

Deprecated in HTML5, use css margin.

Cellspacing in Table

Table without cellspacing

S No Name
1 abc
2 xyz

Table with cellspacing 0

S No Name
1 abc
2 xyz

Table with cellspacing 10

S No Name
1 abc
2 xyz

<table border="1">
    <tr>
        <td>S No</td>
        <td>Name</td>
    </tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xyz</td>
    </tr>
</table>

            
           
<table border="1" cellspacing="0">
    <tr>
        <td>S No</td>
        <td>Name</td>
    </tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xyz</td>    
    </tr>
</tbody>
</table>
            

<table border="1" cellspacing="10">
    <tr>
        <td>S No</td>
        <td>Name</td>
    </tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xyz</td>    
    </tr>
</tbody>
</table>
            

Cellpadding

Cellpadding means padding of text or content inside table cell from the table border. Same like css padding. Default cell padding is 1.

Deprecated in HTML5, use css padding.

Cellpadding in table

Table without cellpadding

S No Name
1 abc
2 xyz

Table with cellpadding 0

S No Name
1 abc
2 xyz

Table with cellpadding 10

S No Name
1 abc
2 xyz

<table border="1">
    <tr>
        <td>S No</td>
        <td>Name</td>
    </tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xyz</td>
    </tr>
</table>    

<table border="1" cellpadding="0">
    <tr>
        <td>S No</td>
        <td>Name</td>
    </tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xyz</td>
    </tr>
</table>

<table border="1" cellpadding="10">
    <tr>
        <td>S No</td>
        <td>Name</td>
    </tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xyz</td>
    </tr>
</table>

Colspan

Colspan attribute is used to merge two or more columns in one. Thus we can have rows with different columns. Minimum value for colspan is 2 and default value is 1.

Colspan Example

S No Name Email Id Score
1 abc abc@domain.com 88
2 xyz xyz@domain.com 78
Total 166

<table border="1">
    <tr>
        <th>S No</th>
        <th>Name</th>
        <th>Email Id</th>
        <th>Score</th>
    </tr>
    <tr>
        <td>1</td>
        <td>abc</td>
        <td>abc@domain.com</td>
        <td>88</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xyz</td>
        <td>xyz@domain.com</td>
        <td>78</td>
    </tr>
    <tr>
        <td colspan="3>Total</td>
        <td>166</td>
     </tr>   
</table>		            
		        

Rowspan

Rowspan attribute can merge two more rows in a table. Default value of rowspan is 1, and minimum assigned value of rowspan is 2.

Rowspan Example

S No Name Class
1 abc 9th
2 jkl
3 pqr 7th
4 xyz
Total 4

<table border="1">
    <tr>
        <th>S No</th>
        <th>Name</th>
        <th>Class</th>
    </tr>
    <tr>
        <td>1</td>
        <td>abc</td>
        <td rowspan="2">9th</td>
    </tr>
    <tr>
        <td>2</td>
        <td>pqr</td>
    </tr>
    <tr>
        <td>3</td>
        <td>xyz</td>
        <td rowspan="2">7th</td>
    </tr>
    <tr>
        <td>4</td>
        <td>xyz</td>
    </tr>
    <tr>
        <td colspan="2">Total</td>
        <td>4</td>
    </tr>   
</table>	    		      
		  

Align Attribute in Table

Align attribute is used inside table tag, tr, or td to align text. Align center for table can also align whole table to middle.

Deprecated in HTML5, use css text-align

Align attribute's value

  1. Left
  2. Center
  3. Right

Table with align center

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

<table border="1" align="center">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>


Bgcolor

bgcolor attribue was used in table to set background color of table.

Deprecated in HTML5, use css background-color

bgcolor in table

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


<table border="1" bgcolor="#FF0000">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

TH, Table Header


th or table head is used inside table row with <th> tag. All major browsers display the text inside <th> element as strong and centre aligned.

Table th example

Name Age
Kaushal 21
Shubh 20


<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Kaushal</td>
        <td>21</td>
    </tr>
    <tr>
        <td>Shubh</td>
        <td>20</td>
    </tr>
</table>