HTML Column Merge Col Colspan Row Merge Rowspan
Chapter 6
HTML
ROW ROWSPAN,COL COLSPAN
HTML Tables are used to
display tabular data form in html. HTML Table is defined
with the <table> tag and then table row <tr> and
cells <td> or <th>. Table tag is the parent of
table. Table is a set of rows column and have rows, data, captions,
rowgroup, rows, colgroup, cols, etc.
Colspan Attribute
Colspan attribute is used to merge
two or more columns in one. Thus we can have rows with different columns.
Minimum value for colspan is 2 and default value is 1.
Source Code For Colspan
<html>
<head>
<title>Demo
Program of colspan</title>
</head>
<body
bgcolor="pink">
<table
border="1">
<tr>
<th
colspan="4"> Student Information Data</th>
</tr>
<th>S No</th>
<th>Full Name</th>
<th>Email Id</th>
<th>Makes</th>
</tr>
<tr>
<td>1</td>
<td>aman kumar</td>
<td>aman@gmail.com</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>raj verma</td>
<td>raj@yahoo.com</td>
<td>96</td>
</tr>
<tr>
<th
colspan=4>This is online information Data</th></tr>
</table>
</body>
The Output Of Above Code :
 |
| Example of Rowspan and Colspan |
Rowspan Attribute
Rowspan attribute can merge two more rows in a
table. Default value of rowspan is 1, and minimum assigned value
of rowspan is 2.
Source Code For Rowspan
<html>
<head>
<title>demo programe of rowspan</title>
</head>
<body bgcolor="pink">
<table border="1">
<tr>
<th>Roll No</th>
<th>Subjects</th>
<th>marks</th>
</tr>
<tr>
<td rowspan=3>1</td>
<td>eng</td><td
rowspan="3">250</td></tr>
<tr> <td>math</td></tr>
<tr> <td>hindi</td></tr>
<tr>
<td rowspan=3>2</td>
<td>eng</td><td
rowspan="3">285</td></tr>
<tr> <td>math</td></tr>
<tr> <td>hindi</td></tr>
<tr>
<td rowspan=3>3</td>
<td>eng</td><td
rowspan="3">256</td></tr>
<tr> <td>math</td></tr>
<tr> <td>hindi</td></tr>
<tr>
<td colspan="3">Student marks detail</td>
</tr>
</table>
</body>
Question Hub Solution
Write HTML code
to insert a table of three row and three columns using colspan and rowspan at
one place
<head>
<title>Demo Program
of rowspan colspan</title>
</head>
<body
bgcolor="pink">
<table
border="1">
<tr>
<th
colspan="2"> Student Data</th>
<th rowspan=3>Student
<br>Information</th</tr>
</tr>
<th>Roll No</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>aman kumar</td>
</tr>
</table>
</body>
Post a Comment