Level no.12
Lecture no.12
Column and Row Spanning in table tag
HTML tables can have cells that span over multiple rows and columns.The row span is used for merging row and column span is used for merging column.
Syntax
For Column Span
<td colspan="6"> Hello Coding <td>.
For Row Span
<td rowspan="4"> Hello World <td>.
Code (Column-span)
<!DOCTYPE html>
<html>
<head>
<titile> Row and Column Spanning </title>
<style>
td{
border: 2px solid black;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<p>
<table>
<tr>
<td colspan="2"> Column 1</td>
<td> Column 2</td>
<td> Column 3</td>
</tr>
<tr>
<td> Column 4</td>
<td> Column 5</td>
<td colspan="2"> Column 6</td>
</tr>
</table>
</p>
</body>
</html>
Output
| Column 1 | Column 2 | Column 3 | |
| Column 4 | Column 5 | Column 6 | |
Code (Row-span)
<!DOCTYPE html>
<html>
<head>
<titile> Row and Column Spanning </title>
<style>
td{
border: 2px solid black;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<p>
<table>
<tr>
<td rowspan="2">Row 1</td>
<td> Row 2</td>
<td> Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td> Row 5</td>
<td roqspan="2">Row 6</td>
</tr>
</table>
</p>
</body>
</html>
Output
| Row 1 | Row 2 | Row 3 |
| Row 4 | Row 5 | Row 6 |
Table Header
Table header is used for giving heading in the table. To create title or introduce the paragraph below them.
Syntax
<th> Table Tag </th>
Code
<!DOCTYPE html>
<html>
<head>
<titile> Row and Column Spanning </title>
</head>
<body>
<p>
<table>
<th> Table Tag </th>
</table>
</p>
</body>
</html>
Output
Table Tag
Comments
Post a Comment