COLSPAN attribute with example:
- COLSPAN attribute used to combine two are more columns.
- This attribute used in <td> tag to combine the columns.
<td colspan="2">welceome</td>
Example:
<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table width="450" border="1" cellpadding="5px" cellspacing="0" align="center">
<caption>Student Details</caption>
<tr><th>Name</th><th>Age</th><th>College</th></tr>
<tr><td>srinu</td><td>24</td><td>smm</td></tr>
<tr><td>pawan</td><td>27</td><td>smm</td></tr>
<tr><td colspan="3" align="center">Complete details</td></tr>
</table>
</body>
</html>
OUTPUT:
Output screen shows that third row contain only one column after colspan.
ROWSPAN attribute with example:
- ROWSPAN attribute used to combine to rows.
- rowspan attribute used in <td> tag.
<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table border="1" width="60%" align="center" cellpadding="10" cellspacing="0"borderColor="maroon">
<tr><th>College</th><th>Name</th><th>RollNO:</th><th>branch</th><th>Year</th></tr>
<tr><td rowspan="5">svsc</td><td>venkat</td><td>501</td><td>CSE</td><td>FirstYear</td>
</tr>
<tr><td>murali</td><td>502</td><td>CSE</td><td>secondYear</td></tr>
<tr><td>kumar</td><td>523</td><td>ECE</td><td>thirdYear</td></tr>
<tr><td>varun</td><td>555</td><td>EEE</td><td>fourthYear</td></tr>
<tr><td>maneesh</td><td>423</td><td>civil</td><td>firstYear</td></tr>
</table>
</body>
</html>
OUTPUT:
Example3:
<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table border="1" width="60%" align="center" cellpadding="10"
cellspacing="0"borderColor="maroon">
<tr><th>College</th><th>Name</th><th>RollNO:</th><th>branch</th><th>Year</th></tr>
<tr><td rowspan="5">svsc</td><td>venkat</td><td>501</td><td>CSE</td><td rowspan="5">FirstYear</td></tr>
<tr><td>murali</td><td>502</td><td>CSE</td></tr>
<tr><td>kumar</td><td>523</td><td>ECE</td></tr>
<tr><td>varun</td><td>555</td><td>EEE</td></tr>
<tr><td>maneesh</td><td>423</td><td>civil</td></tr>
</table>
</body>
</html>
OUTPUT:
Important Note:
COLSPAN:
When you mentioned colspan = 2, here we are combining two columns of same row as one column.
<tr><td colspan=2>1</td><td>2</td></tr>
<tr><td>2</td><td>4</td><td>6</td>
Do you think first row contains total 2 columns but you are wrong, in first row too contains three columns.First column it self contain two columns but we merged two columns as one.
When coming to second row it contains three columns.
ROWSPAN:
When coming to rowspan, here we combining two columns of different rows.
So make sure that second row contains one column was removed and that column combines with first row column.
<tr><td rowspan="2">mani</td><td>23</td></tr>
<tr><td>26</td></tr>
if you see sample code first row contains two columns but coming to second row contains only one column.
It inherits column from its above row.
0 comments:
Post a Comment