What is 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

Here is a list of Tags inside table.

Tag Name Description
<table> Defines a table Element
<th> Defines a table header
<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 Attribute

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


Width in Table

Deprecated in HTML5, use css border.

Table width


<table width="200">
    <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>

(Browser View)

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

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="1px">
<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="1px">
<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.

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 in px. Same like 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>

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="1px 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-clor

bgcolor in table

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


<table border="1px 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>