 |
Tables For Beginners
|
eobcards@eobcards.com
Did you ever wonder how some people put borders around their text or pictures?
Or put a picture next to text, or even better have a picture with text on both sides. It's easy, they use tables.
Here is an easy to understand tutorial on how to build tables, put borders around them and add backgrounds.
Start your table with this:
<table>
</table>
Next thing you need to do is start the first row and column with <tr><td>.
Each tag you open must be cancelled out. Now you have this:
<table>
<tr><td>
</td></tr></table>
Now you can add your text to the table. This:
<table>
<tr><td>YOUR TEXT</td></tr>
</table>
Will give you this:
Wait !! there is no border around it, so lets add a border. This will give you a border 2 pixels thick. You can make it as thick as you want.
<table border=2>
<tr><td>YOUR TEXT</td></tr>
</table>
Now we have this:
Lets align the table in the center of the page. To do this we must add
align=center left is default. You can also use align=right
(NOTE..Older browsers may not recognize align=center
You can also use <center> just before <table>
and </center> just after your table)
Now we have:
<table border=2 align=center>
<tr><td>YOUR TEXT</td></tr>
</table>
Not very big is it? Unless you set a width, the table will only be as wide as the text or picture inside it.
so lets set a width. If you want the table to be 75% 0f the screen, you must add width=75% like this:
<table align=center border=2 width=75%>
<tr><td>YOUR TEXT</td></tr>
</table>
But you don't want your text all the way to the left? How about if we add
align=center to the <td> tag? You can also use align=right.
On a deep cell you can also vertically align your text or picture with valign=top valign=middle
or valign=bottom
<table align=center border=2 width=75%>
<tr><td align=center>YOUR TEXT</td></tr>
</table>
If you notice the text is almost touching the border. If you want to add some space from the text to the border,
add cellpadding=15 This will give you 15 pixels of space from the border to your text. Default is 2, if you want the border to touch your text or picture, use cellpadding=0
<table align=center border=2 width=75% cellpadding=15>
<tr><td align=center>YOUR TEXT</td></tr>
</table>
Lets add some color to the table. Now we will add bgcolor=black to the table
<table align=center border=2 width=75% cellpadding=15 bgcolor=black>
<tr><td align=center>YOUR TEXT</td></tr>
</table>
Where did the text go? It's hard to see black text on a black background, so lets change the color of the text with
<font color=white> Make sure it is cancelled out with </font>
<table align=center border=2 width=75% cellpadding=15 bgcolor=black>
<tr><td align=center><font color=white>YOUR TEXT</font></td></tr>
</table>
Did you know some browsers will even let you determine the color of the border?
Now we will add bordercolor=red and we will get this:
<table align=center border=2 width=75% cellpadding=15 bgcolor=black bordercolor=red>
<tr><td align=center><font color=white>YOUR TEXT</font></td></tr>
</table>
Next we are going to add a second column to the table. Notice we added cols=2 and another <td> </td> line just before the </tr>
Remember, each row starts with <tr> and ends with </tr>
And every Cell starts with <td> and ends with </td>
<table align=center border=2 width=75% cellpadding=15
bgcolor=black bordercolor=red cols=2>
<tr><td align=center><font color=white>YOUR TEXT</font></td>
<td align=center><font color=white>Second column</font></td></tr>
</table>
If you want to add some space between your cells, add cellspacing=15 Or any other size you prefer.
<table align=center border=2 width=75% cellpadding=15
bgcolor=black bordercolor=red cols=2 cellspacing=15>
<tr><td align=center><font color=white>YOUR TEXT</font></td>
<td align=center><font color=white>Second column</font></td></tr>
</table>
You can add a different color or background to each cell. To use a background
use background=http://YOUR BACKGROUND URL inside your <table> for the whole table,
<tr> for the table row, or <td> for the table cell. To keep the page from taking a long time to load, I am just going to use background colors.
<table align=center border=2 width=75% cellpadding=15
bgcolor=black bordercolor=red cols=2 cellspacing=15>
<tr><td align=center><font color=white>YOUR TEXT</font></td>
<td align=center bgcolor=blue><font color=white>Second column</font></td></tr>
</table>
When we made this table, we set the width to 75% of the screen. When we added the second column (cell),
each cell took up 50% of the table. What if we want one side wider than the other?
We will have to set a width to each <td> to do that. How about we make the left side 20% and the right side 80%?
This is how you do it:
<table align=center border=2 width=75% cellpadding=15
bgcolor=black bordercolor=red cols=2 cellspacing=15>
<tr><td align=center width=20%><font color=white>YOUR TEXT</font></td>
<td align=center bgcolor=blue width=80%><font color=white>Second column</font>
</td></tr></table>
Now we are going to add another row to our table. The easiest way is to copy everything from and including
<tr> to </tr> and paste it in between </tr> and </table>
This will give you another row identical to the one we just made.
<table align=center border=2 width=75% cellpadding=15
bgcolor=black bordercolor=red cols=2 cellspacing=15>
<tr><td align=center width=20%><font color=white>YOUR TEXT</font></td>
<td align=center bgcolor=blue width=80%><font color=white>Second column</font>
</td></tr>
<tr><td align=center width=20%><font color=white>YOUR TEXT</font></td>
<td align=center bgcolor=blue width=80%><font color=white>Second column</font>
</td></tr>
</table>
| YOUR TEXT |
Second column |
| YOUR TEXT |
Second column |
On the second row, I changed the color of the text and cells. I also changed the alignment in the cells.
This is what I got:
<table align=center border=2 width=75% cellpadding=15
bgcolor=black bordercolor=red cols=2 cellspacing=15>
<tr><td align=center width=20%><font color=white>YOUR TEXT</font></td>
<td align=center bgcolor=blue width=80%><font color=white>Second column</font>
</td></tr>
<tr><td align=left bgcolor=yellow width=20%><font color=black>Left</font></td>
<td align=right bgcolor=red width=80%><font color=blue>Right Bottom</font>
</td></tr>
</table>
| YOUR TEXT |
Second column |
| Left |
Right bottom |
If you want to put a picture in the middle, with text on both sides, you need to make a three column table
with text in the first cell, the picture URL in the middle cell, and more text in the last cell. Remember you don't need to add a border or any color to the cells.
here is a sample of what you can do.
You can make as many rows or columns as you need, just make sure each row starts with <tr>
and ends with </tr>, and every cell starts with <td>
and ends with </td>
NOTE: it is very important that you cancel out your table with </table>
Now that you understand the basics of building tables,
Click here to see what you can do with them, including: building tables inside tables and
spanning rows & columns, with easy to use copy and paste templates for lots of different layouts.
Also Click here for lots of cool stuff you can copy and paste into your tables.
Questions? | My website
| Back to top
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
|