HTML Table

Written By: Avinash Malhotra

Updated on

HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 93 reviews
  1. Home
  2. Frontend
  3. Html
  4. Table
  1. HTML Table
  2. Table Tags
  3. Table Attributes
  4. Table Caption
  5. Table Border
  6. Cellspacing
  7. Cellpadding
  8. Rowspan
  9. Colspan

Table

HTML Tables are used to display tabular data in html. Table is defined within <table> tag and then table row <tr> and cells <td> or <th>. Table tag is the parent of table. Table can have rows, data, captions, colgroup, cols, etc.

Till 2005, whole website was build using table tag, but later or Div Based Layouts become popular as div based layouts are easy to build and maintain than table based layout. Also table is not scalable. Using a large table can block content loading. Table are also not responsive.

Tables are only used for structured data. Number of columns should remain same for each row. Although we can merge cells in row or columns.

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

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

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

Table Attributes

Here is a list of attributes of table tag. All presentational attributes are removed in HTML5. For styling like border, width, background, etc, best practice is to use css.

Table Attributes
AttributeUse
widthwidth of table or table cell
heightheight of table or table cell
alignalign text in table
valignvertically align text in table cell
borderborder width of table in px
bgcolorbackground color of table
cellspacinggap between table cells
cellpaddinggap inside table cells
colspanused to group columns in same row.
rowspanused to group columns in next row.
spanused to span colgroup cols.

Attributes with removed flag on right are removed in HTML5.

Table Caption

caption tag 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 Child of table element. Thus tr, thead, tbody or tfoot are used after table caption.

Following is a list of table attributes with use.

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 was 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 value specify the width of border. Default table border is zero. Table border can have any numeric value.

Deprecated in HTML5, use css border. 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>

Table Border in HTML5

To add table border in HTML5, use css border property. 


<style>
    table, td, th{ border:solid 1px gray;}
</style>

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 cellspacing

S No Name
1 abc
2 xyz

cellspacing 0

S No Name
1 abc
2 xyz

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 in 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 values

  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 attribute 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 heading is cell used inside table row with <th> tag. All <th> are bold and center aligned as they are used to display heading cell.

Table th example

Name Age
Kaushal 21
Shubh 20 


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