Here I will follow up with an example because words are hard to explain. Here is a table 3 x 3 as Unflux described:
<table border="1" width="200" height="200"><tr><td bgcolor="#882222">cell 1</td><td bgcolor="#228822">cell 2</td><td bgcolor="#882222">cell 3</td></tr><tr><td bgcolor="#228822">cell 4</td><td bgcolor="#882222">cell 5</td><td bgcolor="#228822">cell 6</td></tr><tr><td bgcolor="#882222">cell 7</td><td bgcolor="#228822">cell 8</td><td bgcolor="#882222">cell 9</td></tr>
</table>
<table border="1" width="200" height="200">
<tr>
<td bgcolor="#882222">cell 1</td>
<td bgcolor="#228822">cell 2</td>
<td bgcolor="#882222">cell 3</td>
</tr>
<tr>
<td bgcolor="#228822">cell 4</td>
<td bgcolor="#882222">cell 5</td>
<td bgcolor="#228822">cell 6</td>
</tr>
<tr>
<td bgcolor="#882222">cell 7</td>
<td bgcolor="#228822">cell 8</td>
<td bgcolor="#882222">cell 9</td>
</tr>
</table>
- <table border="1" width="200" height="200">
- <tr>
- <td bgcolor="#882222">cell 1</td>
- <td bgcolor="#228822">cell 2</td>
- <td bgcolor="#882222">cell 3</td>
- </tr>
- <tr>
- <td bgcolor="#228822">cell 4</td>
- <td bgcolor="#882222">cell 5</td>
- <td bgcolor="#228822">cell 6</td>
- </tr>
- <tr>
- <td bgcolor="#882222">cell 7</td>
- <td bgcolor="#228822">cell 8</td>
- <td bgcolor="#882222">cell 9</td>
- </tr>
- </table>
Now here is a table where cell 2 has a colspan of 2 and cell 7 has a colspan of 2.
<table border="1" width="200" height="200"><tr><td bgcolor="#882222">cell 1</td><td bgcolor="#228822" colspan="2">cell 2</td></tr><tr><td bgcolor="#228822">cell 4</td>
<td bgcolor="#882222">cell 5</td><td bgcolor="#228822">cell 6</td>
</tr><tr><td bgcolor="#882222" colspan="2">cell 7</td><td bgcolor="#882222">cell 9</td></tr></table>
<table border="1" width="200" height="200">
<tr>
<td bgcolor="#882222">cell 1</td>
<td bgcolor="#228822" colspan="2">cell 2</td>
</tr>
<tr>
<td bgcolor="#228822">cell 4</td>
<td bgcolor="#882222">cell 5</td>
<td bgcolor="#228822">cell 6</td>
</tr>
<tr>
<td bgcolor="#882222" colspan="2">cell 7</td>
<td bgcolor="#882222">cell 9</td>
</tr>
</table>
- <table border="1" width="200" height="200">
- <tr>
- <td bgcolor="#882222">cell 1</td>
- <td bgcolor="#228822" colspan="2">cell 2</td>
- </tr>
- <tr>
- <td bgcolor="#228822">cell 4</td>
- <td bgcolor="#882222">cell 5</td>
- <td bgcolor="#228822">cell 6</td>
- </tr>
- <tr>
- <td bgcolor="#882222" colspan="2">cell 7</td>
- <td bgcolor="#882222">cell 9</td>
- </tr>
- </table>
As you can see what happens is the cell now takes up two cells worth of space. You can do the same with rowspan which takes up multiple rows of space. In this example cell 1 has a rowspan of 2 and cell 6 has a rowspan of 2:
<table border="1" width="200" height="200"><tr><td bgcolor="#882222" rowspan="2">cell 1</td><td bgcolor="#228822">cell 2</td><td bgcolor="#882222">cell 3</td></tr>
<tr><td bgcolor="#882222">cell 5</td><td bgcolor="#228822" rowspan="2">cell 6</td></tr><tr><td bgcolor="#882222">cell 7</td>
<td bgcolor="#228822">cell 8</td></tr></table>
<table border="1" width="200" height="200">
<tr>
<td bgcolor="#882222" rowspan="2">cell 1</td>
<td bgcolor="#228822">cell 2</td>
<td bgcolor="#882222">cell 3</td>
</tr>
<tr>
<td bgcolor="#882222">cell 5</td>
<td bgcolor="#228822" rowspan="2">cell 6</td>
</tr>
<tr>
<td bgcolor="#882222">cell 7</td>
<td bgcolor="#228822">cell 8</td>
</tr>
</table>
- <table border="1" width="200" height="200">
- <tr>
- <td bgcolor="#882222" rowspan="2">cell 1</td>
- <td bgcolor="#228822">cell 2</td>
- <td bgcolor="#882222">cell 3</td>
- </tr>
- <tr>
- <td bgcolor="#882222">cell 5</td>
- <td bgcolor="#228822" rowspan="2">cell 6</td>
- </tr>
- <tr>
- <td bgcolor="#882222">cell 7</td>
- <td bgcolor="#228822">cell 8</td>
- </tr>
- </table>
Ozzu Hosting - Want your website on a fast server like Ozzu?