HTML table cross-row and cross-column operations (rowspan, colspan)

Generally, the colspan attribute of the <td> element is used to implement cell cross-column operations, and the rowspan attribute of the <td> element is used to implement cell cross-row operations.

The colspan attribute specifies the number of columns a cell can span. All browsers support the colspan attribute. Its value is number, as shown in the following figure:

For example:

<table border="1">
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
  </tr>
  <tr>
    <td colspan="2">Sunday</td>
  </tr>
</table>

The implementation result is shown in the figure below:

The rowspan attribute specifies the number of columns a cell can span. All browsers support the rowspan attribute. Its value is number, as shown in the following figure:

For example:

<table border="1">
  <tr>
    <td rowspan="2">Monday</td>
    <td>Tuesday</td>
  </tr>
  <tr>
    <td>Wednesday</td>
  </tr>
</table>

The implementation result is shown in the figure below:

The use of colspan and rowspan is summarized as follows:

<table border="1">
  <tr>
    <th colspan="3">Material Details</th>
  </tr>
  <tr>
    <td colspan="2" align="center">Quantity (pieces)</td>
    <td rowspan="2">Weight (tons)</td>
  </tr>
  <tr>
    <td>Actual number of issuances</td>    
    <td>Actual amount collected</td>
  </tr>
  <tr>
    <td>12</td>    
    <td>10</td>
    <td>100.00</td>
  </tr>
</table>

The implementation result is shown in the figure below:

This is the end of this article about HTML table cross-row and cross-column operations (rowspan, colspan). For more relevant HTML table cross-row and cross-column content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!