Dragon Mage Graphics
Table Terror
Tables can make a site look extremely fantsy, but this comes at the
price of most webmaster's sanity. At first, it was just a pain that
I left out of my pages, but later found it was better to learn some more
about them. (Note: Check out the HTML From Sctrach
Section before moving on, please!)
<html>
<head> <title> Welcome
</title> </head>
<body bgcolor="#000000" text="#FFFFFF" link="#0000FF"
alink="#00FF00" vlink="#484898">
<center>
<h1>
Welcome!
</h1>
<center>
<p>
Tables are easy to learn if you take it
step by step. Try not to get off track, and I'll go slowly.
<br>
<table border=0>
</table>
</body>
</html>
|
Meet the bare table. It doesn't have any attribute besides the border,
which is set at zero. You can change this, but please don't over due
any of it! Be sure to use the '/table' tag to close the table now so
that you do not forget.
<html>
<head> <title> Welcome
</title> </head>
<body bgcolor="#000000" text="#FFFFFF" link="#0000FF"
alink="#00FF00" vlink="#484898">
<center>
<h1>
Welcome!
</h1>
<center>
<p>
Tables are easy to learn if you take it
step by step. Try not to get off track, and I'll go slowly.
<br>
<table border=0 cellpadding=0 cellspacing=0>
</table>
</body>
</html>
|
This adds two new attributes to our table. The cellpadding is how much
space there is between the cells (table data) of the table and the
border. The cellspacing is how far apart the cells (table data) are
apart from each other. Normally, if you don't use these tags, they
are automatically set at 2, so change it here unless you want this
to happen.
<html>
<head> <title> Welcome
</title> </head>
<body bgcolor="#000000" text="#FFFFFF" link="#0000FF"
alink="#00FF00" vlink="#484898">
<center>
<h1>
Welcome!
</h1>
<center>
<p>
Tables are easy to learn if you take it
step by step. Try not to get off track, and I'll go slowly.
<br>
<table border=0 cellpadding=0
cellspacing=0 width=100%>
</table>
</body>
</html>
|
The width can be set in percentages or in pixels, but unless you wish
to set it at 100%, please use pixels, as it will change with resolution
if someone else is browsing with a smaller or larger screen.
<html>
<head> <title> Welcome
</title> </head>
<body bgcolor="#000000" text="#FFFFFF" link="#0000FF"
alink="#00FF00" vlink="#484898">
<center>
<h1>
Welcome!
</h1>
<center>
<p>
Tables are easy to learn if you take it
step by step. Try not to get off track, and I'll go slowly.
<br>
<table border=0 cellpadding=0
cellspacing=0 width=100%>
<tr>
<td>
This is Cell One of Row One
</td>
<td>
This is Cell Two of Row One
</td>
</tr>
</table>
</body>
</html>
|
Okay, let's leap into the table rows and table data! As you can
see, the data in this table is "This is Cell One of Row One" and
"This is Cell Two of Row Two". They will be side by side of each
other because they are in the same table row (tr tag).
<html>
<head> <title> Welcome
</title> </head>
<body bgcolor="#000000" text="#FFFFFF" link="#0000FF"
alink="#00FF00" vlink="#484898">
<center>
<h1>
Welcome!
</h1>
<center>
<p>
Tables are easy to learn if you take it
step by step. Try not to get off track, and I'll go slowly.
<br>
<table border=0 cellpadding=0
cellspacing=0 width=100%>
<tr>
<td bgcolor="#000033">
This is Cell One of Row One
</td>
<td>
This is Cell Two of Row One
</td>
</tr>
</table>
</body>
</html>
|
This is the best part! Playing around with the background colors and
background images! If you would like to see the table above in action, then click here.
Want to learn more about tables? Move on to the More Advanced Table.
Back to HTML Help.
Back to Dragon Mage Graphics.
© drago. Please do not remove anything from this page. The backgrounds are offered in the free graphics sections.
|