| < Adding Colour & Images | Attributes > |
Whereas a standard table has the same number of cells in each row it is possible to create an irregular table.
Because you cannot have 2 TD cells in the same row different heights the way round this is to span a cell over other rows, the same applies if you are wanting TD cells a different width in the same column.
For every row that the cell is spanned that row will have 1 less TD cell
In the table below row 1 has 4 cells whilst rows 2 and 3 have 3 cells.
| Row1 Cell1 | Row1 Cell2 | Row1 Cell3 | Row1 Cell4 |
| Row2 Cell1 | Row2 Cell2 | Row1 Cell3 | |
| Row3 Cell1 | Row3 Cell2 | Row1 Cell4 |
For the above example you start of by creating your first row with 4 TD cells, but because the first TD cell is going to be the height of three rows you include rowspan="3" in TD cell ones opening tag.
<table border="1" width="300">
<tr>
<td rowspan="3">Row1 Cell1</td><td>Row1 Cell2</td><td>Row1 Cell3</td><td>Row1 Cell4</td>
</tr>
Now you create your second row but you have to remember that cell one in row one is spanning down where row2 cell1 should be so you miss out the first TD cell in row 2 and only create 3 TD cells.
<table border="1" width="300">
<tr>
<td rowspan="3">Row1 Cell1</td><td>Row1 Cell2</td><td>Row1 Cell3</td><td>Row1 Cell4</td>
</tr>
<tr>
<td>Row2 Cell1</td><td>Row2 Cell2</td><td>Row1 Cell3</td>
</tr>
The same is done for row 3
<table border="1" width="300">
<tr>
<td rowspan="3">Row1 Cell1</td><td>Row1 Cell2</td><td>Row1 Cell3</td><td>Row1 Cell4</td>
</tr>
<tr>
<td>Row2 Cell1</td><td>Row2 Cell2</td><td>Row1 Cell3</td>
</tr>
<tr>
<td>Row3 Cell1</td><td>Row3 Cell2</td><td>Row1 Cell4</td>
</tr>
</table>
The same can be done for spanning cells over columns
|
<table border="1" width="300" height="100%"> <tr> <td>Row1 Cell1</td><td colspan="2">Row1 Cell2</td><td>Row1 Cell3</td> </tr> <tr> <td>Row2 Cell1</td><td>Row2 Cell2</td><td>Row1 Cell3</td><td>Row1 Cell4</td> </tr> <tr> <td>Row3 Cell1</td><td colspan="2">Row3 Cell2</td><td>Row1 Cell4</td> </tr> </table> |
| ||||||||||||
Create your first row of 3 cells and in the second TD cells opening tag include colspan="2" because this cell is going to span over 2 columns>
<tr>
<td>Row1 Cell1</td><td colspan="2">Row1 Cell2</td><td>Row1 Cell3</td>
</tr>
The second row has 4 TD cells
<tr>
<td>Row2 Cell1</td><td>Row2 Cell2</td><td>Row1 Cell3</td><td>Row1 Cell4</td>
</tr>
The third row is exactly like the first row with the second TD cells opening tag including colspan="2"
<tr>
<td>Row3 Cell1</td><td colspan="2">Row3 Cell2</td><td>Row1 Cell4</td>
</tr>
| Row1 Cell1 Spans 4 Rows |
Row1 Cell2 Spans 4 Columns |
||||
| Row2 Cell1 Spans 3 Rows |
Row2 Cell2 | Row2 Cell3 Spans 2 Rows |
Row2 Cell4 | ||
| Row3 Cell1 Spans 2 Rows |
Row3 Cell2 | ||||
| Row4 Cell1 Spans 2 Columns |
|||||
<table border="1" height="300">
<tr valign="top">
<td rowspan="4" width="100">Row1 Cell1</td>
<td colspan="5" width="300" height="50">Row1 Cell2</td>
</tr>
<tr valign="top">
<td rowspan="3" width="30">Row2 Cell1</td>
<td>Row2 Cell2</td>
<td rowspan="2">Row2 Cell3</td>
<td height="50">Row2 Cell4</td>
</tr>
<tr valign="top">
<td rowspan="2" width="30">Row3 Cell1</td>
<td>Row3 Cell2</td>
</tr>
<tr>
<td colspan="2">Row4 Cell1</td>
</tr>
</table>
| < Adding Colour & Images | Attributes > |