Spanning Columns & Rows
eobcards@eobcards.com


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. If you're too lazy to learn how to do it yourself Click here for a bunch of templates you can copy & paste.
If you want to learn how to do it yourself you start out with this: 

<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>

onetwothree
fourfivesix
seveneightnine

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
fourfivesix
seveneightnine


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>

onetwothree
fivesix
eightnine


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>

1A2A3A4A
1B2B3B4B
1C2C3C4C
1D2D3D4D

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>

1A2A 4A
1B2B3B4B
1C2C3C4C
1D2D3D4D

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>

1A2A 4A
2B3B4B
2C3C4C
2D3D4D

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>


<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 colspan=2 rowspan=2>2B</td>           <td>4B</td></tr>
<tr>                                                     <td>4C</td></tr>
<tr>                               <td>2D</td><td>3D</td><td>4D</td></tr>
</table></center>

1A2A 4A
2B 4B
4C
2D3D4D

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>

Tables For Beginners | Basic Tables | HTML Page | My Website | Templates
Keasbey Eagles Olympic Weightlifting Team



O'Brien's Tree Services And Stumpgrinding

Serving all Tampa Bay FL Area counties.
Tree Trimming, Removals, Stumpgrinding
Call for a free estimate
Pinellas (727) 520-2582
Hillsborough (813) 270-3889

CLICK HERE for more information