Tables
You know what? I think tables are one of the most useful 'inventions' as far as HTML goes.. why? *grrr.. had to ask a tough question did ya?* Well... for example.. without tables.. a webpage has the potential to look like this.... *you sure you wanna look? .. POSITIVE? oh ... all right.. if you insist!* (just hit the back button on your browser to get back here) *sigh* ya made me do this. OH MAN! did you see what happened? It was PRETTY messy! I wrote all over my left hand border! Do you REALLY want someone to see that kind of mess? I didn't! That's why that page is named YUCKY!
Ok.. you ready? gotta take notes on this one.. and you MAY want to bookmark this page.. tables take a little getting use to.. but with good explanation of the tags.. you'll understand in no time..!!
First we're gonna start off with what the tags are.. and then we'll go into how to use them.. it'll make somewhat more sense that way.
<table> hmm.. yup..
table!
<th> .. table header
<tr> .. table row
<td> .. table data
</td> .. close table data
</tr> .. close table cell
</table> .. hmm.. yup.. close table!
ok.. that wasn't hard.. so
what's the big ole deal?!!! *wait.. don't demand your money back just
yet!!!* Let's put some of that into action!
| HELLO! | my friend! |
| but you can't see the difference | can you? |
What we've done in that example.. is to create.. a table.. with two seperate rows <tr> and two seperate data 'cells' <td>. Although you can not see the individual 'cells' easily in this particular case..you can spot them by the spacing.. you can also determine the rows.. *sorry I picked a really bad example.. but hold on..I'll make it a bit clearer..lol*
*doing a bit of HTML magic here.. abracadabra!!!*
| HELLO! | my friend! |
| but you can't see the difference | can you? |
Now do you see it? .. ok.. I'll tell ya.. tables are wonderful for organizing things.. framing things!!! *they're probably my utmost favorite thing!!!* Now that you have the very BASICS of tables... there's all sorts of internal commands that have to be learned as well.. of course.. knowing me.. I'll forget half of them as I'm writing this *hee hee* and most of them I don't use myself either.. so.. let's begin..
What I did in that last example..
to make things more clear... is called "border=#" .. it goes like this:
<table border=4> .. you can put in any number you want.. the bigger
the number.. the thicker the border around the table..
There is a reason this .. so called.. computer knowledge.. is on this page.... There are different screen resolutions.. each computer is set up differently.. for different reasons.. not everyone can optomized things!!!! You have a choice, when you're working in tables, to either put things in pixels, or percentages. There's a drawback to pixels.. and here's what it is.
In pixels.. you are telling the browser to have something that is "640" pixels wide.. or.. "1000" pixels wide.. *any number would work* but you know what????? that pixel value is catrastrophe for someone who has a screen resolution of only 640.. if the value is higher than that.. then that poor person is scrolling all over the place.. *that means frustration!!!!!!!! and a frustrated viewer doesn't read and doesn't come back to your page EVER* THAT is why you SHOULD use percentages.. no matter what resolution anyone has.. they will not have to scroll.
As an actual example .. *using numbers for the logical students in the class* if your screen resolution is 640 and the guy next to you has 1024 (and I am NOT talking monitor size here) .. Let's say I have created a page using tables.. and one of my tables is set up with as being this <table border=5 width=300> .. now the guy that has the 640 resolution will see a table.. that is roughly 50% of his screen.. looks pretty good.. right? Now lean over to your neighbor.. and look at the same table on his screen.. it's gonna be just over 1/4 of his screen... and it looks dinky! All affect is totally lost on him. BUT.. if you do this instead.. <table border=5 width=50%> .. you on your 640 screen will see a table that is half your screen and so will your neighbor.. happy solution for any view.. and webmaster.
More information can be found here.
Now that we've talked about screen resolution *and if you did not read it scroll back 3 paragraphs and do so* we can talk about widths and heights in tables. As I said, there's two ways of doing it, percentages and pixels. Percentages is wonderful for widths. As an example, this page (the white area) is written as a width of 100%.
How to do one table without any fancy stuff, at a certain width, is like this:
| Test! |
Now, because that table is w/in the tables that I have for this page, the green section that says "test" should cover 75% of the white section of your screen, no matter the resolution. You can put any number in there that you see fit, for your width. If you put no number one of two things will happen, depending on the data within that cell.
| This section is 20% of the three sections | This section is 75% of the three sections | This is the remaining 5% |
| Test! |
The same can be done with the <tr> and <td> cells, exactly as it was done in the example above, but just by putting height=# in the right spots.
Hmmm.. now I know you're wondering what happened to that <th> stuff I had mentioned.. right? well.. with a <th> we can create a header for our table
| HELLO! |
|---|
| I see that we've come to this |
| part of the instructions |
Hmmm.. a nice, neat little header.. without having to use <h1> for example..
Another aspect of tables that people should use.. is the <caption> tag.. as in this example..
<table border=15
> <caption> Neuschwanstein Castle </caption> <tr> <td>
<center> <a href="page1.html"> <img src="images/bandwidth.jpg"
alt="castle" border="0" height="229" width="325"></a> </center>
</td> </tr> </table>
We can also do the same thing, but with the caption under the picture
by adding <caption align=bottom> .. like this:
<table border=15 > <caption align=bottom> Neuschwanstein Castle
</caption> <tr> <td> <center> <img src="images/bandwidth.jpg"
alt="castle" border="0" height="229" width="325"> </center> </td>
</tr> </table>
As you've been
seeing, I've been putting color inside the tables, so you can actually
'see' what I'm talking about in most cases. You can apply color the
the entire table <table bgcolor="#7ec3bf"> or to each individual
cell as below:
Or to a row... Cellpadding is the space that is between
the stuff inside the table, and the border of the table. It applies
to each and every cell equally. Here's an example using our button from
our images page
hmm?
color?
Testing1
Testing2
Testing3
Testing4
Testing5
Testing6
|
|
|
Now cellspacing is just a bit different..
it's the amount of space between each individual cell...
| Cell 1 | Cell 2 | Cell 3 |
Now there's lots of ways to align your table, or to align the data inside the table.. let's start with the actual table first...
| Center outside the table tags |
| Center in the table tag |
The same works with align=right and the default will be align=left
Aligning inside is a bit different. You have
to make use of align and valign. Align would be your normal
alignment, center or to the right.. such as this:
| default | center | right |
valign is the verticle alignment.. how it's
going to be placed in that table.. top to bottom...
| Top | Middle | Bottom |
Now, it's nice to use both the align and
valign to get things exactly where you want them...this as an example:
| Top and center | bottom and right |
You can do the same thing for your <tr> tag, if you wish to align your entire row the same way.
This element allows for one cell of data
to take the space up of two or more without messing up the rest of our
table... you simpley specify how many cells you want it to take up:
| cell 1 | cell 2 | |||
| cell 3 | cell 4 | cell 5 | cell 6 | cell 7 |
This does the same thing, as colspan, except
it specifies the amount of rows you wish to take up..
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 |
Put colspan and rowspan together, and you
can design yourself a nice little table.
| Cell 1 | Cell 2 | |
| Cell 3 | Cell 4 | |
| Cell 5 | Cell 6 | |
| Cell 7 | ||
Technically this is called "nesting tables". What's it used for? Well, there are times, such as this page.. that you need to put tables, within tables. What's important to know here, is that you need to make sure you close all html within your tables. AND you close all your table tags correctly, including the tables, themselves. If you do not do that, Your page can vanish. It can do that anyways if your tables aren't closed correctly, but it's more difficult to figure where the problem is when you have multiple tables inside of each other... just do things carefully ;)
Ok, the 'how' to do it..
| This is my table | ||||||
|
||||||
| Back to my outter table now. | ||||||
You can put as many tables inside of tables that you want, as long as you remember that for every <tr><td> that you have open, you MUST close... and, right before every table starts, you must close the <td> tag *or the <tr> if it's going into a new row* and open a new one up.. or you will not have a page looking how you want it to.
Working w/ bordered backgrounds
I have seen several different ways of working with bordered backgrounds. They range from using <blockquote> to using <ul> to indent off of the left hand border. It works, I won't deny it, but I don't think it's the best way to do things. A simple table is not hard to build, dispite the length of this tutorial on tables. And a simple table is all that is required, for putting your homepage, on a bordered background.
Most people prefer to not write on the left hand side of their bordered background, it's got some sort of picture there already, you picked it, you like it, and you want to be able to see it.. not a bunch of stuff on it.. so here's how you do it.
<head>
<title> Title of your page</title>
<html>
<body>
<table width=90%> <tr> <td height="23" width="8%"> <img
src="glassbrick.gif" width="135" height="32"></td> <td height="23"
width="92%"> Everything you want on your page goes in this spot.. ALL
HTML works inside of here </td> </tr> </table>
</body></html>
The colors in your
body tag are up to you, whatever colors you want.. but the basics of
the table are the same... it comes right after the body tag.. you put
everything inside the table that you want.. close the table.. close
the body.. then close the html. Now that glassbrick can be downloaded
here:
*right mouse click to save*
It is a transparent gif that is only 1K in size and you can adjust the
height and width to suit your needs.. and to push the left *empty* cell
enough to the right to make the border work. You do not need to know
a lot about tables, in order to use a bordered background that you like.
If you happen to have a more complex background, it's bordered on two sides *yup it happens* it CAN be worked with, so text and images do not run onto either border. Perhaps those in the lower resolutions can not see it, but others can.. and it CAN look perfect in any resolution. A good thing to have is what's called a 'glassbrick.gif'. What it is a transparent gif, approximately 5x5, it's not very big, so it also isn't too big in K size. You can use this gif to push things over .. to take up empty <td> cells so they aren't empty. To use this glassbrick (right mouse click, 'save link as' .. to save that gif to your computer) you can adjust the height and width of it as you need. You may not need it for your page, and in most cases it's not even necessary, but it's nice to have.
Ok..I'm getting tired now.. and I think this class session is just about over.. so I'm gonna sum this up.. *bell rings in 5 minutes* There are other tags that go along with tables. You can determine the color of the border but Netscape and MSIE recognize that differently. With Netscape, your best bet is to remember to use a bgcolor in your body tag, and your tables will pick that up as your border color. Both Netscape and MSIE can use this: <table border=5 bordercolor="#cde48f">
With the new 4.x browsers out, HTML has changed a bit, and tables can now support using a background image inside the table or cell, allowing for other images or text, on top. The problem with this is that over 50% of your viewers most likely have not upgraded their browsers to a 4.x version, so they are not seeing what you want them to see. If you want to use this feature, take that into consideration. To get an image up as a background image.. :
The same can be done with individual cells:
If you want to use a background, then perhaps you could set it up so those w/out the higher browsers can view your table with just a color instead. In the higher browsers the background will take the color over.
Empty cells... as I said before, empty cells can be a bit hard to deal with.. both browsers do different things with them. In MSIE, they'll be fine, but in Netscape, they'll collapse.. so you can use the glassbrick that I talked about earlier to take space up in that cell. (right mouse click 'save link as' to save that image).
Everytime you start a table, or a table data cell, you need to redo any specific HTML that you want, that is not predetermined in the body tag of your HTML document. This includes font faces, font sizes, font colors, etc. Copy/paste is a wonderful tool at times =)
Text
Size & Types | Font Colors & Faces
Combining Attributes | Color
Chart
Images | Alignment
Horizontal Rules | Links
| Lists
Tables
| Resolution | Midis
& Sounds
FTP
Copyright © 1996-
Rose Swinson, Eloquent Vision, Evisione
All rights reserved