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.