HTML Tables Tutorial

Page 20 - <td> rowspan


Sometimes it is desired to remove the border between two cells. Although nested tables are the key to control, this is sometimes a desired, or even necessary method. You can remove the border between cells in a column, or in a row. This page demonstrates the first, making a cell span through a column with rowspan.
<table border="1">
   <tr>
      <td>Cell #1</td>
      <td>Cell #2</td>
   </tr>
   <tr>
      <td>Cell #3</td>
      <td>Cell #4</td>
   </tr>
</table>
=
Cell #1 Cell #2
Cell #3 Cell #4

<table border="1">
   <tr>
      <td>Cell #1</td>
      <td rowspan="2">Cell #2</td>
   </tr>
   <tr>
      <td>Cell #3</td>
      <td>Cell #4</td>
   </tr>
</table>
=
Cell #1 Cell #2
Cell #3 Cell #4

Note that cell four must be deleted! The second row is doing what it is told. It is drawing three cells, it has two td's and a td spanning into it. That is why you must not have code for the cell being spanned into. A good idea is to replace the code with a comment.


<table border="1">
   <tr>
      <td>Cell #1</td>
      <td rowspan="2">Cell #2</td>
   </tr>
   <tr>
      <td>Cell #3</td>
      <!-- drawn be previous row -->
   </tr>
</table>
=
Cell #1 Cell #2
Cell #3

 

 
MPF.com Site Map