DRAKES : Test

BACK TO INTRO
spanning Columns and Rows
The easiest way I found to lay out a table spanning Columns and Rows is to make a table with as many columns and rows as you need, add the required rowspan= and / or colspan= to the <td> tag you want to span, and erase the cells you want to eliminate, including <td> and </td>. Lets say you want 3 columns and 3 rows. Notice I assigned each cell a number, that makes it easier to identify each cell. You can erase the number and insert your own text or picture. You can also insert another table inside the cell. I set the width to use 50% of the screen, you can make them as wide as you need. You can also change the background color and thickness of the border.

<center>
<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor=cyan cols=3>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>four</td><td>five</td><td>six</td></tr>
<tr><td>seven</td><td>eight</td><td>nine</td></tr>
</table></center>

one	two	three
four	five	six
seven	eight	nine

If you want the top row to be one cell to add a title or something, add colspan=3 to the <td> tag just before one , and erase the cells
<td>two</td><td>three</td>
You will get this:

<center>
<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor=cyan cols=3>
<tr><td colspan=3>one</td></tr>
<tr><td>four</td><td>five</td><td>six</td></tr>
<tr><td>seven</td><td>eight</td><td>nine</td></tr>
</table></center>

one
four	five	six
seven	eight	nine

If you would rather have cells one, four and seven to be all one column, add rowspan=3 to the <td> just before one and erase
<td>four</td>
<td>seven</td>

<center>
<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor=cyan cols=3>
<tr><td rowspan=3>one</td><td>two</td><td>three</td></tr>
<tr>                      <td>five</td><td>six</td></tr>
<tr>                      <td>eight</td><td>nine</td></tr>
</table></center>

one	two	three
	five	six
	eight	nine

In the next example, we are going to span some columns and rows in the same table. We are also going to make a cell that will span a column and row at the same time.
We are going to use a table that has four columns and four rows. We start with this:

<center>
<table border=2 width=70% cellspacing=5 cellpadding=8 bgcolor=cyan cols=4>
<tr><td>1A</td><td>2A</td><td>3A</td><td>4A</td></tr>
<tr><td>1B</td><td>2B</td><td>3B</td><td>4B</td></tr>
<tr><td>1C</td><td>2C</td><td>3C</td><td>4C</td></tr>
<tr><td>1D</td><td>2D</td><td>3D</td><td>4D</td></tr>
</table></center>

1A	2A	3A	4A
1B	2B	3B	4B
1C	2C	3C	4C
1D	2D	3D	4D

If you want cells 2A and 3A to be one cell, you add colspan=2 to the <td> tag just before 2A, and erase the entire 3A cell. <td>3A</td>

<center>
<table border=2 width=70% cellspacing=5 cellpadding=8 bgcolor=cyan cols=4>
<tr><td>1A</td><td colspan=2>2A</td>        <td>4A</td></tr>
<tr><td>1B</td><td>2B</td><td>3B</td><td>4B</td></tr>
<tr><td>1C</td><td>2C</td><td>3C</td><td>4C</td></tr>
<tr><td>1D</td><td>2D</td><td>3D</td><td>4D</td></tr>
</table></center>

1A	2A		4A
1B	2B	3B	4B
1C	2C	3C	4C
1D	2D	3D	4D

How about if you want the left column to be all one cell? All you have to do is add rowspan=4 to the <td> just before 1A and remove the cells

<td>1B</td>
<td>1C</td>
<td>1D</td>

<center>
<table border=2 width=70% cellspacing=5 cellpadding=8 bgcolor=cyan cols=4>
<tr><td rowspan=4>1A</td><td colspan=2>2A</td>           <td>4A</td></tr>
<tr>                     <td>2B</td><td>3B</td><td>4B</td></tr>
<tr>                     <td>2C</td><td>3C</td><td>4C</td></tr>
<tr>                     <td>2D</td><td>3D</td><td>4D</td></tr>
</table></center>

1A	2A		4A
	2B	3B	4B
	2C	3C	4C
	2D	3D	4D

Now we shall make 2B, 2C, 3B & 3C all one cell. This time we are going to have to add colspan=2 rowspan=2 to the <td> tag just before 2B, and erase cells

           <td>3B</td>
<td>2C</td><td>3C</td>

1A	2A		4A
	2B		4B
			4C
	2D	3D	4D

I hope this page is of some help. Just remember every row starts with <tr> and ends in </tr>, and every cell starts with <td> and ends with </td>