HTML Table Tag | Tr, Td, Rowspan, Colspan, Cellspacing Cellpadding

• HTML Tutorial
• HTML Tags
• HTML Attributes
• HTML Text
• HTML Headings
• Block & Inline Elements
• HTML Lists
• Hyperlink
• HTML Images
• HTML Iframes
• HTML Entities
• HTML Meta Tag
• HTML Tables
• HTML Form
• HTML5
• HTML5 New Tags
• HTML5 Attributes
• HTML5 Vs HTML4
• HTML5 Audio and Video
• HTML5 Form.
• HTML5 SVG.
• HTML5 Canvas.
• HTML5 Geolocation.
• Local & Session Storage
• HTML Marquee
• Doctypes in HTML
• XHTML
• DHTML

• ← HTML Meta Tag
• HTML Form→

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

Attribute	Use
width	width of table or table cell
height	height of table or table cell
align	align text in table
valign	vertically align text in table cell
border	border width of table in px
bgcolor	background color of table
cellspacing	gap between table cells
cellpadding	gap inside table cells
colspan	used to group columns in same row.
rowspan	used to group columns in next row.
span	used 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>

• ← HTML Meta tag
• HTML Form→