Previous Next

HTML Tables

The HTML tables are created using the <table> tag.

<tr> tag is used to create table rows

<td> tag is used to create data cells.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Result:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

 


  

Table Border

Use border attribute to show border of table.

To remove border use border=0

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border=1>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Result 

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

 

Table Heading

Table heading can be defined using <th> tag.

You can use <th> element in any row.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>30</td>
</tr>
</table>
</body>
</html>

Result:

Name Price
Apple 100
Banana 30

 


 

Cellpadding and Cellspacing Attributes

The cellspacing attribute defines the width of the border.

The cellpadding defines the distance between cell borders and the content within a cell.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>30</td>
</tr>
</table>
</body>
</html>

Result:

Name Price
Apple 100
Banana 30

 


 

Colspan and Rowspan Attributes

Use colspan attribute to merge two or more columns into a single column.

Use rowspan to merge two or more rows.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

Result:

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

 


 

Tables Backgrounds

You can set table background using one of the following two ways:

  • bgcolor attribute - You can set background color for whole table or just for one cell.

  • background attribute - You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

Result:

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

 


 

Table Caption

The caption tag defines the title of the table. 

It is displayed at the top of the table. 

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>

Result:

This is the caption
row 1, column 1 row 1, columnn 2
row 2, column 1 row 2, columnn 2

 


 

 

Table Header, Body, and Footer

The table contains following three sections:

  • <thead> - to create a table header.
  • <tbody> - to indicate the main body of the table.
  • <tfoot> - to create a table footer.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Result:

This is the head of the table
This is the foot of the table
Cell 1 Cell 2 Cell 3 Cell 4

 


Nested Tables

Tables can be nested within another table inside <td> tag.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
   <table border="1" width="100%">
   <tr>
   <th>Name</th>
   <th>Salary</th>
   </tr>
   <tr>
   <td>Ramesh Raman</td>
   <td>5000</td>
   </tr>
   <tr>
   <td>Shabbir Hussein</td>
   <td>7000</td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>

Result:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Previous Next