HTML Table Colspan and Rowspan
Last Updated :
09 Feb, 2024
In HTML, the rowspan attribute specifies how many rows a table cell should span, determining its vertical position. On the other hand, the colspan attribute specifies the number of columns a cell should span, determining its horizontal position. Defining together, they provide a powerful mechanism for cells to cover multiple rows and columns, offering flexibility in structuring complex tables.
HTML Table with Colspan
HTML Table with Colspan allows you to merge or combine adjacent table cells horizontally, creating a single, wider cell that spans across multiple columns.
Note: The colspan is defined as the <th> element.
Example: The element illustrates the HTML Table with colspan.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Table with Colspan</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table with Colspan
</h3>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>Gupta</td>
<td>1</td>
</tr>
<tr>
<td>Sri</td>
<td>Krishn</td>
<td>3</td>
</tr>
<tr>
<td>Shivika</td>
<td>Goyal</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Output
HTML Table with Rowspan
The HTML attribute rowspan determines how many rows a specific cell in a table should cover. When a cell spans multiple rows, it occupies the space of those rows within the table.
Note: Applied within a <td> or <th> element.
Example: The element illustrates the HTML Table with Rowspan.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
color: green;
}
table {
width: 70%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML Table Rowspan</h2>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th rowspan="3">MVM School</th>
</tr>
<tr>
<td>Radha</td>
<td>10</td>
</tr>
<tr>
<td>Ankur</td>
<td>11</td>
</tr>
</table>
</body>
</html>
|
Output:
Output
Table with Rowspan and Colspan Togther
The Table with Rowspan and Colspan Togther helps in creating the table more complex and structured. The table utilizes rowspan and colspan attributes to merge cells, creating a structured layout.
Example: The element illustrates the HTML Table with Colspan and rowspan.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table with Rowspan and Colspan</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table with Rowspan and Colspan</h3>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
<th>School</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Mahima</td>
<td rowspan="2">Gupta</td>
<td>11</td>
<td rowspan="2">MVM School</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td rowspan="2">Sri</td>
<td rowspan="2">Krishn</td>
<td>3</td>
<td rowspan="2">LMS School</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td rowspan="2">Shivika</td>
<td rowspan="2">Goyal</td>
<td>5</td>
<td rowspan="2">SCPM School</td>
</tr>
<tr>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...