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 websites were built using table tags, but later div based layouts became popular as they are easier to build and maintain than table-based layouts. Also, table layouts are not scalable. Using large tables can block content from loading. Tables are also not responsive, so not ideal for mobile devices.

Tables are only used for structured data. Number of columns should remain same for each row. Although we can merge cells in rows or columns using rowspan and colspan attributes.

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 marked as removed on the right are no longer supported in HTML5.

Table Caption

Caption tag is used inside a table to add a caption or title for the table. The default text alignment of the caption is center. The caption tag should always be used as the first child of the table element. Thus, tr, thead, tbody, or tfoot tags are used after the table caption.

Following is a list of table attributes with their uses.

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 tables, the width attribute was used to set the width of the table. In HTML5, the width attribute is removed. The CSS width property is used to set the width of the table in HTML5. The width attribute can also cause overflow on mobile devices as the screen width is lesser than the table width.

Deprecated in HTML5, use css width.

How to set the width of a 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

The table border attribute is used to display the border of the table. The border attribute value specifies the width of the border in pixels. The default table border is zero. The 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 a table border in HTML5, use the CSS border property.

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

Cellspacing

Cellspacing attribute in a table is used to set the margin between table cells and the table border. The default cellspacing is 2. By using the cellspacing attribute, we can change the 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 the padding of text or content inside the table cell from the table border. It is similar to CSS padding. The 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 into one. Thus, we can have rows with different numbers of columns. The minimum value for colspan is 2, and the default value is 1.

Colspan Example

S No	Name	Email Id	Score
1	abc	[email protected]	88
2	xyz	[email protected]	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>[email protected]</td> <td>88</td> </tr> <tr> <td>2</td> <td>xyz</td> <td>[email protected]</td> <td>78</td> </tr> <tr> <td colspan="3">Total</td> <td>166</td> </tr> </table>

Rowspan

Rowspan attribute can merge two or more rows in a table. The default value of rowspan is 1, and the 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>jkl</td> </tr> <tr> <td>3</td> <td>pqr</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

The align attribute is used in the table tag, tr, or td to align text. Align center for table can also align the whole table to the 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 tables to set the background color of the 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 header is a cell used inside a table row with the <th> tag. All <th> elements are bold and center-aligned by default, as they are used to display header cells.

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→