Loading Please Wait...
Sometimes there is a need, where a single table cell may contain (span) more than one row or column. To achieve this, we can use rowspan and colspan attributes for table data (td tag) and table header (th tag)
To span table cell over multiple columns, we use colspan attributes. Where colspan represent the number of column to span.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Name</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@gmail.com</td>
</tr>
<tr>
<td>Micheal</td>
<td>Jackson</td>
<td>micheal@gmail.com</td>
</tr>
</table>
</body>
</html>
To span table cell over multiple rows, we use rowsapn attributes. Where rowspan represent the number of rows to span.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<td>John</td>
</tr>
<tr>
<th rowspan="2">Email</th>
<td>john1@gmail.com</td>
</tr>
<tr>
<td>john2@gmail.com</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Name</th>
<th rowspan="2">Email</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@gmail.com</td>
</tr>
<tr>
<td>Micheal</td>
<td>Jackson</td>
<td>micheal@gmail.com</td>
</tr>
</table>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved