celldata Home >Web Front-end >HTML Tutorial >What do table rowspan and colspan mean in HTML? rowspan and colspan are attributes of the These attributes should be placed inside the The following is the syntax for merging table cells in HTML - Now let's look at an example where the row span of one of the columns is set to 2. The following is the output of the above example program An example of merging table column cells in HTML is given below. The following is the output of the above example program. Here is another example of merging rows and columns by setting the values of the rowspan and colspan properties in a single program The following is the output of the above example program. The above is the detailed content of What do table rowspan and colspan mean in HTML?. For more information, please follow other related articles on the PHP Chinese website!What do table rowspan and colspan mean in HTML?
tag. These are used to specify the number of rows or columns into which cells should be merged. The rowspan attribute is used to merge rows and the colspan attribute is used to merge columns of a table in HTML.
tag as shown below -
grammar
<td rowspan="2">cell data</td>
<td colspan="2">cell data</td>
Example 1 - Setting Row Span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,
tr,
th,
td {
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th>First Name </th>
<th>Job role</th>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Example 2 - Setting colspan
<!DOCTYPE html>
<html>
<style>
table,tr,th,td {
border:1px solid black;
padding: 20px;
}
</style>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td colspan="2" ></td>
</tr>
<tr>
<td ></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
Example 3
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<table>
<tr>
<td colspan="2" ></td>
</tr>
<tr>
<td ></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>