Html Tables
The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells.
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>
This will produce the following result:
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Here, the border is an attribute of <table> tag and it is used to put a border across all
the cells. If you do not need a border, then you can use border="0".
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag,
which is used to represent actual data cell. Normally you will put your top row as table
heading as shown below, otherwise you can use <th> element in any row.
1
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<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>
</body>
</html>
This will produce the following result:
2
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space
in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents
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>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
This will produce the following result:
3
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar
way you will use rowspan if you want 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>
This will produce the following result: