HTML Table Tag

Tables are used in html to show Tabular data. Tables are defined with the <table> tag and then table row and columns. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data" and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Code in html

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>

HTML 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
<th> Defines a table header cell
<tr> Defines a table row
<td> Defines a table cell or table data
<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. Defualt 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

Deprecated in HTML5, use css border.

To display table with border, specify the width of border. Default table border is zero. Table border can have any numeric values.

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


Deprecated in HTML5, use css margin.

cellspacing in table is used to set margin between table cells and table border. Default cellspacing is 2px.

Cellspacing of Table

Table without cellspacing

S No Name
1 abc
2 xyz

Table with cellpspacing 0px

S No Name
1 abc
2 xyz

Table with cellspacing 10px

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

Deprecated in HTML5, use css padding.

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

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>

Align Attributes in Table

Deprecated in HTML5, use css text-align

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

Align value in table

  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

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.

th inside table

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>