<-- Back to HTML contents

Tables

• HTML tags for tables
• Examples and HTML for various tables
• The skinny on tables

An example of a basic table

That basic table was created with this HTML:

HTML tags for various tables

• <TABLE BORDER> and </TABLE> are the HTML tags that signify the START and END of a table.
• <TR> and </TR> ...depending on how many of these there are, there's that many rows. It stands for table row.
• <TD> and </TD> ...stand for table data. You can put basically anything inside these 2 HTML tags (TD and /TD), and that is what will appear within the little boxes of your table. These tags always come after the <TR> tag and before the </TR> tag, because you need a table row for the table data to be inside.
• <TH> and </TH> are basically the same as the TD and /TD tags are, only the contents of those data boxes are in bold.
• By putting ALIGN=right, left, or center after <TD and before > you can align the contents of that little box.
• By putting ALIGN=right, left, or center after <TABLE and before > you can align the entire table.
• By putting VALIGN=top, bottom, or middle after <TR and before > you can change the positions of the words in the data boxes.
• Putting ROWSPAN=2 after <TD means that that data box thing will take up 2 rows vertically.

Example:

was made with this HTML...

As you can see, ITEM 1's box takes up 2 rows. You can change the number of rows it will take up, also, but you need to have enough rows available to use.

works the same way, only it adds to the length of the columns, not the rows. The columns run from left to right, and the rows run up and down. The HTML is the same, also, except you would put

Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.

NOTE! You can have any mixture of amounts of rows and whatnot, so have fun with this HTML. BUT, copying it is the safest bet.

You can change the background color of the Table Row and Table Data elements by adding bgcolor=#rgb(6digits) to the end of the tags:

Here is an example:

would create a black background.
RGB is the hex code for values for colors.

By clicking here you can download an excellent hex color picker program that takes the pain out of using hexadecimals.

EXAMPLES AND HTML FOR VARIOUS TABLES

Now that you have been shown the basics of tables, I'll show you a few examples with their HTML so that you can "shop and compare" and mix and match different aspects of certain tables. Also, by seeing and using the HTML, you learn it automatically. If you want a more in-depth, but harder to understand, explanation of tables, then Click here. What I'm really aiming to do with this section below is get you aquainted with the most common types of tables while still showing you the different ways they can be built and used.

THE BASIC TABLE

This basic table was created with this HTML:

ANOTHER ROWSPAN DEMONSTRATION

That ROWSPAN demo was made with this HTML:

Demonstration of COLSPAN with HEADERS

That was done with this HTML:

Demonstration of SIDE HEADERS and ROWSPAN

That was done with this HTML:

Table using all of the above things

That was done with all this HTML:

The skinny on tables

Now, there's only a few real things you gotta know about tables in general to be a self-proclaimed table expert.
Number one is to remember this order: Table border, table row, and table data. That is the order in which to set up your table.
The table data tags (<td>) are always enclosed in a table row tag (<tr>), and the table row tag is always in between the opening and closing tags, which are <table border> and </table>, respectively. You can have all the table rows you want, and all the table data boxes you want, so have fun and go wacky.
Number two is the table border thing: You use the opening tag of <table border> because if you do not include the word border then you will still make a table, but it will not be enclosed in anything and hardly resemble a table. That's OK sometime, though, because table can be used quite effectively to position content on your page, among other style-related things.
Also, when using the <table border> tag, you can add on to the size of the border by putting =# after table border, putting any number 1-99 in the place of the pound symbol (#). Go on, kiddies. Knock yerselves out...

Here I go. If I lose you in this, don't get discouraged, just Go here. Webmoney offers the simplest frames tutorial I am yet to find, and you are encouraged to use it as a backup if my guide isn't easy enough.

Before we get started, I would just like to make sure evryone knows that ROWS go one on top of each other, while COLUMNS go side by side. Look at this stunning graphical representation of what I just said:

Our first example will be a frames page that has two screens. One is on the left, one on the right. the left one takes up only 25% of the space of your browser window, and the right takes up the remaining 75%. You can view the page I am talking about by clicking here, and you can view the HTML on how to create that document by going to DOCUMENT SOURCE or PAGE SOURCE, which you can find by hitting CONTROL+U if you use NETSCAPE, or by going to VIEW at the top of your browser. If you do not use NETSCAPE, then I do not know how to VIEW the DOCOMENT or PAGE SOURCE, but you can do it somehow, and it's not too hard!*

The second example will be a little different. It will be comprised of 3 different frames. Yes, 3. Ooooh. The big time. Don't worry, it's not that difficult. The page will be divided into these 3 frames. The 2 left frames will be one on top of the other, each taking up a certain percentage of the left side. The right frames will be somewhere, as well, and will only take up the rest of the space. To view this example, click here, and to view the HTML for this example, view the document source or whatnot.

Our third example will be a page that con- sists of 2 frames. These 2 frames rest one on top of each other, with the top one taking up 20% and the bottom taking up the remaining 80%. A lot of pages on the web are done this way, and it could be quite useful to display banners, a scrollable table of contents, or a page title. Anyway, the page that I am talking about you can find by clicking right here, and you can see the HTML by viewing the SOURCE CODE. If you do not grasp the idea of SOURCE CODE or anything similiar to that, please refer to the asterisk above or to the bottom of this page.

Now, remember that you can change the three examples I am giving you. The percentages can be changed around, to change how much space on the page each frame takes up. So, when using these frames on your page, if you'd like, it is very easy to change the proportions of each frame.

Below you can find, in order of explanation, the HTML source code for the three examples.

Sidenote

To make links in one frame work on another frame, you have to give each frame a name. You do that by attaching

in the

tags. That will look like this:

And then, when you make the actual HTML for the link, do this:

Got it? So, since you now have each frame named, you can link to them by referring by name. If you want the file "links.html" to appear in the window, or frame, you named "main", then the HTML for the part you click on (the link) would look like this:

The HTML for the anchor, where the above HTML will take you, is part of the frame tag. The below HTML, in which the frames is named, is the anchor:

In the above case the original page to appear in the frame dubbed "main" was "gerbil.html". But, when you click on the link to "links.html" that page will appear in "main". I hope that makes sense to you.

Breaking out of frames can be accomplished by adding

onto the link which will break you to fo frames. Here's a full example:

Got it? The credit for that one goes at LEAST partially to Greg Breitzke {[email protected]} for a) letting me know that I wrongfully didn't include that info in my guide, and b) telling me the code and stuff, because I myself wasn't too sure.

To set the settings for having or not having scrolling in your frames and having a border or not, all you have to do is add a little bit of code and then pick 'yes' or 'no'. Simple. Look, here's an example to set the border to yes and the scrolling to no.

To set the border or scrolling properties all you have to do is alternate between yes and no, and the border can have varying thicknesses, depending on the number.

That would create a frame border with a thickness of '4'.

In order to set the frames to have the ability to be re- sized by the visitor or not, include this code in the code for the frameset:

The full code would resemble this:

Capiche?

Continue -->

| Back to Top of Page |