HTML Tables Tutorial

Page 21 - <td> colspan


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 second, making a cell span through a row with colspan.
<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>Cell #2</td>
   </tr>
   <tr>
      <td colspan="2">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, one of which takes up two cells on its own. 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>Cell #2</td>
   </tr>
   <tr>
      <td colspan="2">Cell #3</td>
      <!-- drawn be previous cell -->
   </tr>
</table>
=
Cell #1 Cell #2
Cell #3

 

 
MPF.com Site Map