Red Cross Donations Basic Tables

eobcards@eobcards.com

Tables For Beginners | Tables Inside Tables | Tables Inside Table Cells | Spanning Columns & Rows
Backgrounds & Background Colors | Align Your Text & Pictures | Multiple Columns & Rows
Different Size Columns | Two Column Table | Two Row Table | Simple One Cell Table
Align Your Pictures Using A Table | The Ultimate Tables Nightmare



<center><table border=2 width=90% cellpadding=10 bgcolor=red> <tr><td>

<center><font color=blue size=+2> Everything goes here </font></center>

</td></tr></table></center>
Everything goes here



This is what it all means
<center> Centers the table, it also centers text and pictures.

table Starts the table

border= Determines the thickness of the border around the table. Border=0 means no border.

width=Determines the width of the screen you want your table to be.

cellpadding= Determines the distance of your text from the border.

bgcolor= Determines the color inside the table.

font color= size= Determines the color and size of the text.




Each tag must be cancelled out in the reverse order it was opened, for example:

<center><table> <tr><td> will be cancelled out with </td></tr></table></center>




If you change the width=90% in the table above to width=50% you will get this:

Everything goes here





If you also change the border=2 in the table above to border=10 you will get this:

Everything goes here





And now if you add bordercolor=green to it, you will get this:

Everything goes here


NOTE: Some older browsers do not recognize bordercolor=




If you also change the cellpadding=10 in the table above to cellpadding=50 you will get this:

Everything goes here


You can also add height to your table by adding <BR> above and below your text or picture.



Simple one cell table

<center><table border=2 width=90% cellpadding=10 bgcolor=yellow> <tr><td>
<center><font color=blue size=+1>
          Your Title Goes Here </font></center>
<BR><BR>
<font color=blue size=+1>
          Your description or picture can go here</font>
</td></tr></table></center>

Your Title Goes Here


Your description or picture can go here.
Add <BR> to start a new line.
Add <BR><BR>

To add spaces below your text or picture.

Add a picture, add <BR>
Add some text, add <BR>
Add a link, add <BR>
Add another picture, add <BR>
Add some more text, add <BR>

The more you add <BR><BR><BR>


The more spaces you will get.

Add <center>          </center> to center your text or picture.


See my Copy & Paste page to find out how to add pictures and other stuff inside your table.




Simple two column table


<center>
<table border=2 width=90% cellspacing=5
                cellpadding=8 bgcolor=lightblue cols=2>
<tr><td align=center>This is what goes on the left side</td>
<td>This is what goes on the right side</td></tr>
</table></center>

You can put your picture on either side by using
<img src=http://YOUR PICTURE LOCATION>.
Then add the rest of your stuff, the same way as in the example above





Simple two row table


<center>
<table border=2 width=90% cellspacing=5
               cellpadding=8 bgcolor=lightblue cols=2>
<tr align=center><td>This is what goes on the top</td></tr>
<tr><td>This is what goes on the bottom</td></tr>
</table></center>

You can put your picture on the top or bottom by using
<img src=http://YOUR PICTURE LOCATION>.
Then add the rest of your stuff, the same way as in the example above





<center>
<table border=2 width=50% cellspacing=5
                      cellpadding=8 bgcolor=lightblue cols=2>
<tr><td align=center colspan=2>Your title can go here</td></tr>
<tr><td align=center>This is what goes on the left side</td>
<td>This is what goes on the right side</td></tr>
</table></center>


Your title can go here
This is what goes on the left side This is what goes on the right side





Multiple rows and columns

This is the first cell in row 1 This is the second cell in row 1 This is the third cell in row 1
This is the first cell in row 2 This is the second cell in row 2 This is the third cell in row 2
This is the first cell in row 3 This is the second cell in row 3 This is the third cell in row 3


This is how you do it
<center> This will center your table

<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor=cyan cols=3>
This will give you a table with a 2 pixel border
The table width will be 50% of the screen
The cells will be 5 pixels apart
The text will be 8 pixels from the border
The background will be cyan
There will be 3 columns


<tr><td>: This will start the first row and the first cell
</td> Will end the first cell and <td>will start the second cell in the first row
</td> Will end the second cell and<td> will start the third cell in the first row
</td></tr> Will end the first row

<tr><td> Will start the second row.
You can continue this way and make as many rows as you need.
Just be sure that each row starts with
<tr> and ends with </tr>
And each cell starts with <td> and ends with </td>

When you are done, cancel out your last cell with</td>, Cancel out your last row with </tr>, cancel out your table with </table>, and cancel out the center tag with</center>




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>

Will give you this:



one two three
four five six
seven eight nine




And This:


<center>
<table border=2 width=90% cellspacing=5 cellpadding=8 bgcolor=cyan cols=5>
<tr><td>one</td><td>two</td><td>three</td><td>four</td><td>five</td></tr>
<tr><td>one</td><td>two</td><td>three</td><td>four</td><td>five</td></tr>
<tr><td>one</td><td>two</td><td>three</td><td>four</td><td>five</td></tr>
<tr><td>one</td><td>two</td><td>three</td><td>four</td><td>five</td></tr>
<tr><td>one</td><td>two</td><td>three</td><td>four</td><td>five</td></tr>
</table></center>

Will give you this:



onetwothreefourfive
onetwothreefourfive
onetwothreefourfive
onetwothreefourfive
onetwothreefourfive





Spanning Columns & Rows
More Info

Notice from the samples below, that you can add colspan or rowspan to your <td> tag, and change the layout of your table.

<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>
                            <td>four</td><td>five</td></tr>
                            <td>six</td><td>seven</td></tr>
                                     </table></center>

one two three
four five
six seven





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

one two three
four five
six seven




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

one two three
four five
six seven

Click Here for more information on spanning columns & rows.
Click Here for lots more samples you can copy and use.





<center>
<table border=0 width=80% cellspacing=5 cellpadding=8 cols=3>
<tr><td width=33% bgcolor=white>This is the left side.</td>
                         <td width=33%></td>
<td width=33% bgcolor=black>
            <font color=white>This is the right side.</font></td></tr>
                         </table></center>

This table has no border. This cell also has a white background. White will only work if the page has a background or color. This is the left side there is nothing in the middle. This side has a black background and white text. The table has no background color, neither does the center cell. That's why it looks like there's nothing there.





Different Size Columns

<center>
<table border=2 width=75% cellspacing=5 cellpadding=8 bgcolor=cyan cols=3>
<tr><td width=10%>1</td><td width=30%>2</td><td width=60%>3</td></tr>
<tr><td width=10%>1</td><td width=30%>2</td><td width=60%>3</td></tr>
<tr><td width=10%>1</td><td width=30%>2</td><td width=60%>3</td></tr>
</table></center>
123
123
123





Tables Inside Tables

<center>
<table border=2 cellpadding=10 bgcolor=red><tr><td>
<table border=2 cellpadding=10 bgcolor=white><tr><td>
<table border=2 cellpadding=10 bgcolor=blue><tr><td>
TEXT
</td></tr></table>
</td></tr></table>
</tr></td></table></center>
TEXT





Tables Inside Table Cells

You can put an entire table inside a table cell or row. Just put your table <table><tr><td> YOUR DATA  </td></tr></table> between the <td> and the </td> tags where you want to insert your table. You can put tables inside of tables, inside of tables etc.
Click here to see what you can do with tables.
The table below consists of one row and two columns. The column on the right has another table inside it which has four columns. This is how it's done:


<table align=center border="4" bordercolor=red width=98%
                  cellpadding=10 cols=2>
<tr><td bgcolor="#FFFFCE" width="20%" valign=top>
This is the left column of the table.</td>
<td width=80%>
<table border=1 width=99% cellpadding=5 cellspacing=8 cols=4>
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
</table>
</td></tr></table>


This is the left column of the table.
onetwothreefour
onetwothreefour
onetwothreefour



And here is a table that has two rows and two columns (4 cells). Each cell has another table in it that has two rows and two columns. Notice that you can not only set the width for the entire table, you can set the width for the tables inside the cells. You can also set the width for each column inside each table. The cell will not get any smaller than the text or picture inside it. A very large picture will enlarge the cell no matter what you set the width at.

onetwo
threefour
12
34
AB
CD
EF
GH

And here is how you do it:

<center>
<table border=2 width=80% cellspacing=5
                 cellpadding=8 bgcolor=lightblue cols=2>
        <tr><td><table width=100% align=center border=2>
<tr><td width=50%>one</td><td>two</td></tr><tr><td>three</td><td>four</td>
</tr></table></td>
    <td><table bgcolor=red width=75% align=center border=2>
<tr><td width=50%>1</td><td>2</td></tr><tr><td>3</td><td>4</td>
                   </tr></table></td></tr>
<tr><td><table bgcolor=white width=50% align=center border=2>
<tr><td width=50%>A</td><td>B</td></tr><tr><td>C</td><td>D</td>
              </tr></table></td>
    <td><table bgcolor=cyan width=100% align=center border=2>
<tr><td width=75%>E</td><td width=25%>F</td></tr><tr><td>G</td><td>H</td>
</tr></table>
              </td></tr></table></center>

If you add another two column, two row table inside each cell in the above table, you would get this:

onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour
onetwo
threefour

Click here for the source code of the above table.





You can align your text or pictures in any row or cell by adding to the <tr> or <td> like this:

<tr align=center valign=middle>This will center your pictures or text vertical and horizontal in the row.
<td align=center valign=middle>This will center your pictures or text vertical and horizontal in the cell.
Horizontal choices are:       Vertical choices are:
      "left"                                  "top"
align="center"                         valign="middle"
      "right"                                 "bottom"





You can use a different background or background color in each row or cell by adding to the <tr> or <td> like this:

<tr bgcolor=red> This will give the row a red background color.
<td bgcolor=red> This will give the cell a red background color.
<tr background="http://YOUR BACKGROUND LOCATION"> This will give the row your background.
<td background="http://YOUR BACKGROUND LOCATION"> This will give the cell your background.

Click here to get some color ideas.



You can change the size and color of the text in any cell with this:

<font color=red size=+2>Your text</font>


You can add a picture in any of the cells with this:

<img src="http://YOUR PICTURE LOCATION">




Put it all together and you can get this:

one
five
six seven







Questions? | My website | Back to top | My HTML Page | Templates