Home > Article > Web Front-end > What do table rowspan and colspan mean in HTML?
What do table rowspan and colspan mean in HTML?
- 王林forward
- 2023-08-31 23:33:052684browse
rowspan and colspan are attributes of the
These attributes should be placed inside the
grammar
The following is the syntax for merging table cells in HTML -
<td rowspan="2">cell data</td> <td colspan="2">cell data</td>
Example 1 - Setting Row Span
Now let's look at an example where the row span of one of the columns is set to 2.
<!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>
The following is the output of the above example program
Example 2 - Setting colspan
An example of merging table column cells in HTML is given below.
<!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>
The following is the output of the above example program.
Example 3
Here is another example of merging rows and columns by setting the values of the rowspan and colspan properties in a single program
<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>
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!