|
|
| Atryeu Designs » Web Design » Tutorials & Guides » Tables Part 1 |
Welcome to the Tables guide! This is more for complete beginners who have no
idea how to write any code yet. If an HTML term comes up that has not been mentioned
before, it will be shown in italics and will be followed with a short description of it
like this: Term (Description).
This guide will hopefully help you understand how to use Tables within your website.
They at first can be confusing, but once you know what the basic codes do, and with
a little practice, you should have no problem getting the hang of things!
Learning the Basics
Most websites online use tables to organize their content better. If you take a look
at my site, you will notice that there are navigation links to the left. Each
section and set of links is divided up by using table codes. They are simple to use,
and greatly help make your content more user friendly.
Your first Table
The very basic table is very simple to write. It is made up of only 3 basic tags.
The "table" tag tells the browser, obviously, that a table is going to be created.
The "tr" tag tells the browser to create a row within the table, and the "td"
tag tells the browser to create a new cell (an area within a table row.. There can
be more than one cell per row) within that table's row.
<table>
<tr><td> Content Here </td></tr>
</table>
The above code creates the basic table for your website and will look like the one
below (the one below has a border added, so you can actually see the table):
|
When you create a table, you must remember a few important things. First, you must
always close the table code! If you use nested tables (explained later), you need to
make sure every single nested table is closed. Second, the "td" tags must be within the
"tr" tags, not the other way around. You also need to remember to close all open "tr" and
"td" tags as well.
Table Properties
As you noticed, that is sort of an ugly looking table, right? We will start to add
more code to the Table tag to start making it look a little bit nicer now. Following
this section, you will find even more codes to add to the "tr" and "td" tags as well.
Table Borders
Since I added a border to my above example, I will begin with that. I personally
prefer to use CSS to create a border since you can make it look much nicer, however
when you first start out, if you do not know CSS well enough yet, go ahead and sick
with this method.
<table border="1">
<tr><td> Content Here </td></tr>
</table>
The above code creates a border around the table:
|
As you can see, adding the border is much like adding or removing the borders from
images, like was mentioned in the Basic HTML guides. If you want a thicker border,
you can change the number inside the quotes. What about changing color of the border?
<table border="1" bordercolor="blue">
<tr><td> Content Here </td></tr>
</table>
The above code creates the border around the table and also tells the browser to
make it a blue border:
|
Pretty simple, isn't it? You can set the border color to any color name or hex code.
That is all there is to adding a border to a table. If you want to get more advanced,
you can use CSS to change the border so it is a bunch of dashes, for example:
For more information on using CSS like this, check out the CSS tutorials, also listed
under the Webmaster Guides/Tutorials.
Spacing and Padding
Rather than having the same basic table setup, like the ones above, you can set
the spacing and padding for the table cells to make it look more interesting.
<table border="1" bordercolor="blue" cellspacing="5" cellpadding="5">
<tr>
<td> Content Here </td>
<td> Content Here </td>
</tr>
</table>
The above code creates adds in spacing and padding to the table's content and
cells:
| Content Here |
Content Here |
|
Notice the larger gap around the text and the two cells in the table? That is what
the Cellspacing and Cellpadding codes are for. They are set to 5 pixels right now,
so you can see the difference. These numbers can be set anyway you like. The larger
the number, the larger the spacing/padding. The Cellspacing code will space the cells
apart, and Cellpadding will give extra padding within each cell so your content is
not pressed so close against the edges.
Alignment and Size
You will usually want to set your tables to a certain width (and even height). If a
width is not specified, the table will be adjusted by your content within the table.
It works the same with height.
<table border="1" bordercolor="blue" width="100" height="100">
<tr><td> Content Here </td></tr>
</table>
The above code creates a table that is 100x100 pixels:
|
You can also use a percentage, rather than pixels if you prefer, to set the width and
height of your table, however it will not be quite as accurate.
<table border="1" bordercolor="blue" width="10%" height="10%">
<tr><td> Content Here </td></tr>
</table>
The above code creates a table that is 10% in width and height:
|
Practice using both the percentage and pixels to find out which you are more comfortable
with. I personally prefer to use pixels most of the time, but will sometimes use
a percentage. Remember that not everybody uses the same Screen Size settings, so
if you use pixels and your screen it larger, it will require visitors with a smaller
screen to scroll across to see your entire page. Although it's not very accurate,
percentages can sometimes fix this problem.
If you want to setup your table in a certain area of your site, for example, the center of
the page, I find it better to just use the Center tag to align the table. However, here
are the alignment codes for you to try out.
<table border="1" bordercolor="blue" width="100" align="center">
<tr><td> Content Here </td></tr>
</table>
The above code creates a table that will be lined up in the center of your page:
|
Like the other align codes, instead of setting it to be centered, you can also use
"left" or "right" to align your table.
<table border="1" bordercolor="blue" width="100" align="center">
<tr><td> Content Here </td></tr>
</table>
The above code creates a table that is centered and aligned at the top of the area:
|
Backgrounds
You can add a solid color or an image as a background into your overall table if you
like. If you do not set a background of some kind, the table will be transparent and
will show your page's background.
<table border="1" bordercolor="blue" width="100" bgcolor="black">
<tr><td> Content Here </td></tr>
</table>
The above code creates a light grey background in the table:
|
If you would rather have a background image, you would use the same code to add a
background image to your overall page.
This concludes the first part of the Tables guide. In the second part, you will
find information about the Table Rows/Columns and how to create Nested Tables.
|
|
|
