Tables

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

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

one	two	three	four	five
one	two	three	four	five
one	two	three	four	five
one	two	three	four	five
one	two	three	four	five

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>

1	2	3
1	2	3
1	2	3

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.

one	two	three	four
one	two	three	four
one	two	three	four

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.

one	two
three	four

1	2
3	4

A	B
C	D

E	F
G	H

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:

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

one	two
three	four

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
Keasbey Eagles Olympic Weightlifting Team