Tables

        Now we get to how to organize everything into neat, orderly rows and columns. This is done using a table. They are rather simple to construct but can be manipulated in so many ways, it isn't even funny. Now then, you want to see a table. Well, look at the screen in front of you. Notice the border around the tutorial and the navigation slide. Everything inside that border is part of one giant table. Now I guess you want to know how to make one. Well, here is the script for a basic table :



        Unfortunately, this script a somewhat boring table. However, if you think about it, almost everything that is the bare bones basic is somewhat boring, no offense to anyone if it was taken. That script got this table :



        Do you see what I mean? There are ways of changing this, almost all of which will be discussed in the tutorial, but first, let's look at the components to the script of "Our first ever Table"!!!!



        Now we get to the fun part, learning how to change, or modify the table to fit our needs. First, let's look at the individual tags we will be talking about. The list is shown below :



        The meaning of the last two tags will become apparent as we get to them. Anyway, these are not the only tags that can be used with tables, but the others deserve their own tutorial, as they break most of the rules set forth by tables. They will come later, so let's focus on what we have in front of us.

---

        Our first tag we will discuss is the <TABLE> tag. This is mandatory in every table, and without it, there would be no table, so we will start here. The following list of attributes are arranged by groups and similar functions :

ALIGN CELLSPACING CELLPADDING BORDER FRAME RULES WIDTH

        Now, these are only the attributes which follow the rules of building by rows. It is possible to build a table without the using rows, but columns, however, that will be discussed later. Let's look at the first attribute - ALIGN. It determines where the table is based on the margins used by the browser. This can have three values, LEFT, RIGHT, and CENTER. If you use LEFT or RIGHT as a value, then the text will wrap around the table, and will be displayed beside the table, to either the right or left. The LEFT attribute puts the table to the left, and the RIGHT attribute puts the table to the right. The CENTER attribute puts the table in the center. The table will prevent text from being displayed to the sides of it, and will have the text displayed above or below it. The default value for ALIGN is left.

<TABLE ALIGN="left">
<TABLE ALIGN="center">
<TABLE ALIGN="right">

        The next set of attributes all deal with the same basic concept, sort of. The CELLSPACING attribute determines how much space is between the separate cells of the table. The CELLPADDING attribute determines how much space is between the table data and the borders of the cell. The BORDER attribute determines how large the border around the table will be.

CELLSPACING="2"

CELLPADDING="10"

BORDER="3"

        In the table above, I gave you the parameters of the CELLSPACING, CELLPADDING, and BORDER attributes I used to make the table. Please notice that the values of all of these attributes are numbers. They are not compatible with the percentage values that most other number-based attributes are. The values of these attributes are strictly numbers, not percentages. Please note that if you place the BORDER attribute inside the tag without an value, then the border size will be 1. The default for CELLSPACING and CELLPADDING is 1, and the default for BORDER is zero.

<TABLE CELLSPACING=2 CELLPADDING=5 BORDER> <TABLE CELLSPACING="3" CELLPADDING="4" BORDER="2">

        The next two attributes have too many values to explain through text, so example will be shown to demonstrate their use and function. These two attributes are the FRAME and RULES attribute. The FRAME attributes determines how the outer borders will be shown, and the RULES attribute how the inner borders will be shown.

FRAME	set
to	VOID

FRAME	set
to	ABOVE

FRAME	set
to	BELOW

FRAME	set
to	HSIDES

FRAME	set
to	LHS

FRAME	set
to	RHS

FRAME	set
to	VSIDES

FRAME	set
to	BOX

FRAME	set
to	BORDER

        That would have taken a mighty long paragraph to describe. Anyway, you can see that both the values box and border act as though the frame attribute was never placed there. I have not found a real distinct purpose for them, but I'm sure there is one somewhere. The FRAME attribute has total authority over the BORDER attribute, unless BORDER is set to 0, then there is no border, so BORDER has control. Whatever the FRAME value is set as determines the outer border style. That is every value of FRAME, so don't try and think up something else, because that is it. It's cousin, the RULES attribute, also has total control over the BORDER attribute, only this time, it has control over the inner borders.

RULES	set
to	NONE

RULES	set
to	COLS

RULES	set
to	ROWS

RULES	set
to	ALL

<TABLE FRAME="void" RULES="cols">

        I am sorry for having to set each table on a separate row in the browser window, but due to the size of some browser window's default settings, this must be done. We have come to the final attribute of the <TABLE> tag discussed here, the WIDTH attribute. If you went through the basic tutorials, this should be a breeze, as it was discussed many times using many different tags. If not, then the WIDTH attribute determines how wide the table is. The value of this attribute can be either a number or a percentage of the screen's width. The cells will be sized appropriately if this is used.

<TABLE WIDTH="200">
<TABLE WIDTH="50%">

---

        Now that we have the <TABLE> tag out of the way, we come to an equally important tag, the <TR> tag. This tag defines a Table Row. There are only four attributes that can modify the <TR> tag. Two of those attributes are listed below :

ALIGN VALIGN

        The other two attributes will be discussed at some other time. The ALIGN attribute describes how the items inside of that rows cells will be horizontally aligned. It can have one of three values, LEFT, RIGHT, or CENTER. What the values do should be self-explanitory. The VALIGN attribute determines the vertical alignment of everything in that row's cells. The possible values of this attribute are TOP, MIDDLE, BOTTOM. These should be self-explanitory too. These attributes also hold for the <TD> tag, which will be discussed next.

<TR ALIGN="center" VALIGN="top">

---

        Now we come to the <TD> tag. This, like the <TABLE> tag, has several attributes which can be placed inside of the cell. A list of attributes, in groups by function relations, is shown below :

ALIGN VALIGN COLSPAN ROWSPAN NOWRAP

        The first two should be familiar, as they have the same effect as those with the same name discussed in the <TR> section, and they also have the same list of values. The next two we will skip for the time being, as they take a while to explain. The NOWRAP attribute prevents the text from wrapping inside the cell and could, in theory, create an infinately wide cell. I would not use this very often, as it creates very long cells.

<TD NOWRAP>

        Now we get to those two attributes, the COLSPAN and ROWSPAN attributes. They control the size of the cell. Let me clarify that. If the COLSPAN attribute has a value of two, then that cell will be two cells wide. Allow me to demonstrate.

Amazing
isn't	it

        To make sure you understand this, here is the script to that last table :

<TABLE BORDER> <TR> <TD COLSPAN="2">Amazing</TD> </TR> <TR> <TD>isn't</TD> <TD>it</TD> </TR> </TR> </TABLE>

        Please note that the altered cell gets its own row, unlike the ROWSPAN cell. Its row is that of the top cell it spans across. I don't expect all of you to understand this right away, but here is an example of what I mean.

Amazing	isn't
	it

        We have just taken that same table, switched the row configuration, and added ROWSPAN instead of COLSPAN, both of which have numeric values. To insure that you have this down right, here is the script :

<TABLE BORDER> <TR> <TD ROWSPAN="2">Amazing</TD> <TD>isn't</TD> </TR> <TR> <TD>it</TD> </TR> </TABLE>

        As you can see, the script is pretty easy to figure out. The altered cell is in the same row as the top cell it spans.

<TD ROWSPAN="2">
<TD COLSPAN="2">

---

        Now we come to Table Headings, hence the term TH. They carry the exact same use as TD, rules as TD, and even carry the exact same attributes as TD. But why aren't they just omitted to use TD? I'll tell you why. The text inside is, by default bold, so they appear to be the heading of a particular row or column of cells. You can try this out if you want, but I will not include an example due to space restraints and page loading time. This is a large page, and if it gets too large, it will take a long time to load.

---

        Now we get to captions. A caption is simply text placed above the table as sort of a title. They are not included in the table border in any way, and are not surrounded by anything. All they do is sit on top of the table and serve as a title. Simple!

<CAPTION>Our Very First Caption</CAPTION>

---

        I bet you are asking, what else can I put in tables? You can put anything you want inside of tables, with the exception of frames. For example, if you wanted to put an image in a table, just use the image script and place it between the <TD> and </TD>. Anything, except frames, you want could be placed as table cell data. This entire page is table cell data. Neat, isn't it? Anyway, I hope you have success with tables. Feel free to e-mail me if you have any problems.