Table Colspan, Rowspan

ColSpan - Table Cells that Span many columns


To make a cell span more than one column, use the colspan attribute:

Sample 01

<html>

<head>
          <title>Table Column Span</title>
</head>

<body>
<table style="width: 100%" border="1">
          <caption>Contact Details</caption>
                   <tr>
                  <th>Company Name</th>
                  <th colspan="2">Contact Numbers</th>
                   </tr>
                    <tr>
                  <td>Sharp Land Software Solutions</td>
                  <td>+91 451 2424871</td>
                  <td>+91 98425 02235</td>
                   </tr>
</table>
</body>

<html>

Check Output

Rowspan - Table Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:

Sample 02 

<table style="width:100%" border="1">
          <caption>Contact Details</caption>
          <tr>
                   <th>Company Name:</th>
                   <td><b>Sharp Land Software Solutions</b></td>
          </tr>
          <tr>
                   <th rowspan="3">Contact Details</th>
                   <td>Land Line : +91 451 2424871</td>
          </tr>
          <tr>
                   <td>Mobile No : +91 98425 02235</td>
          </tr>
          <tr>
                   <td>WebsiteURL: www.sharpland.net</td>
          </tr>
</table>

Check Output

No comments:

Post a Comment