HTML Table Colspan
Colspan to ensure that each row is equivalent to the number of cells that would ordinary appear in the row.
Colspan spans columns that is specified.
Syntax
<ElementName colspan="value">..............</ElementName>
Example: 1
<html>
<head>
<body>
<table border="1">
<tr>
<th colspan="2">Student</th>
</tr>
<tr>
<th>Name</th>
<th>Roll</th>
</tr>
<tr>
<td>Alex</td>
<td>10</td>
</tr>
<tr>
<td>Susie</td>
<td>11</td>
</tr>
</table>
</body>
</html>
Output
| Student | |
|---|---|
| Name | Roll |
| Alex | 10 |
| Susie | 11 |
Note:The table basically consists of two columns. "Student" data spans two columns. Also, table header "Name" and "Roll" are bold and centered and corresponding data are plain text.
Example: 2
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Harry</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Harry</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Output
Cell that spans two columns:
| Name | Telephone | |
|---|---|---|
| Harry | 555 77 854 | 555 77 855 |
Example: 3
<html>
<body>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Harry</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
<body>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Harry</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Output
Cell that spans two rows:
| First Name: | Harry |
|---|---|
| Telephone: | 555 77 854 |
| 555 77 855 |
No comments:
Post a Comment