|
|
| Atryeu Designs » Web Design » Tutorials & Guides » Tables Part 2 |
Welcome to the Tables guide Part 2! 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!
Table Rows and Cells
There are some codes that can be used here that also can be used with the Table tag.
I will still go over them though so you can see how they turn out.
Alignment and Size
As with the table, you can set up a size for your table cells and and the alignment of
your content within those cells.
<table border="1" bordercolor="blue" width="150" bgcolor="black">
<tr><td width="100"> Content </td>
<td width="50">Here</td></tr>
</table>
The above code sets the first table cell to be 100 pixels, and the 2nd
to be 50 pixels:
|
<table border="1" bordercolor="blue" width="150">
<tr><td align="center" valign="top"> Content
</td></tr>
</table>
The above code will align your content in the top center of the table
(A few line break codes are added below so you can see the alignment correctly):
|
Like with the Table tag, the align code will allow you to set your content to be
aligned to either the left, right or the center. The valign code, however, allows
you to set the vertical alignment. You can set this to either: top, middle,
or bottom.
Backgrounds
You can add a certain background color or image to each individual table cell rather
than the entire table if you like. This is done just like with the table tag, but
you will be placing the background code into the table cell tags instead.
<table border="1" bordercolor="blue" width="200" bgcolor="black">
<tr><td width="100" bgcolor="maroon"> Content </td>
<td width="100" bgcolor="navy"> Content </td></tr>
</table>
The above code sets the overall table color to light grey, one table cell
white, and the other silver:
|
Instead of a solid color, you can use an image if you prefer. Just remember
when you use an image for a background, you want to make sure you can read the
text you place over it properly!
Row Span and Column Span
These two bits of code can come in very handy and can allow you to give your tables
a bit of a unique touch with your coding. If you have never messed with tables before,
you are probably wondering what in the world this is. Since I am having the hardest time
trying to explain this very well in words, I will jump right into the examples so you can
see for yourselves. I will start with the Column Span...
<table border="1" bordercolor="blue" width="200" >
<tr><td colspan="2"> Content </td></tr>
<tr><td width="100">Content</td>
<td width="100">Content</td></tr>
</table>
The above codes sets the very first table cell so it will stretch out over 2
columns, instead of the usual 1. It will end up looking like this:
|
If you would like to have your table cell span out over more than just 2 columns,
raise the number a little. Row Span works similar to the above
<table border="1" bordercolor="blue" width="200" >
<tr><td rowspan="2"> Content </td>
<td width="150">Content</td></tr>
<td width="150">Content</td></tr>
</table>
The above codes sets the very first table cell so it will stretch out over 2
columns, instead of the usual 1. It will end up looking like this:
|
I sometimes find the Row Span to be a tad annoying to setup, depending on
how complex your code will be, however it can be a handy feature and with a
little practice, the row span along with the column span can help you create a
more unique design for your web pages.
Nested Tables
You hopefully have a basic idea of how to write out code for tables. This section
will remain short, as most of the information has already been covered in the
previous sections. A nested table is actually very simple to do and in the end can
make your web page even more organized. By the way, for those who do not know, nested
tables are when you have more than one complete table code within another.
There is no trick when using nested tables. It is best, however, if you space
your code out a little bit for the tables, or place a comment in between tables somewhere.
If you start ending up with more than 2 or 3 nested tables, one right after another, it
can get a bit tricky trying to keep track of them all. You need to make sure you close
all open table, tr, and td tags for all nested tables within your page.
<table border="1" bordercolor="blue" width="300">
<tr><td width="150">
<table border="1" bordercolor="black" width="100%">
<tr><td>Content</td><td>Content</td>
</tr></table>
</td>
<td width="150">Content</td></tr>
</table>
The above codes sets the very first table cell so it will stretch out over 2
columns, instead of the usual 1. It will end up looking like this:
|
I added the cellspacing codes to my example so you are able to see the
separate cells a little better. The first table has a blue border, and the
second table, which is nested within the first, has a black border. There is no
limit to how many tables you can nest within one another. Just remember to be sure
and close every single code related to your tables or it may cause your overall page
to look a little odd!
That is about all there is to tables! There are other codes you can add to your
tables as well, but only the most commonly used have been listed within this guide.
|
|
|
