Do it with a Table!
Tables may well be one of the fourst powerful tool at your disposal because they allow you to put everything one you page exactly where you want it. Learn to use them well and you well have great looking pages. OK, lets get started on tables
<table></table> Creates a table <tr></tr> Sets off each row in a table <td></td> Sets off each cell in a row <th></th> Sets off the table header (a normal cell with bold, centered text)
The <table> starts a table and the </table> ends it. The <tr> and </tr> tags start and end a row and the <td> </td> starts and ends a data cell. Here's a sample you can try in a new page.
<table>
<tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell </td> </tr> </table>
| You can nest table inside each other to make them work even harder like this:
You see we've also add the border and width tags to our table. You can also adjust the height of a cell but you should remember this will carry over to all the cells in that row. A couple other attributes of the table tag are cellspacing which sets the space between cells and cellpadding which sets the space between the cells border and its border. Table tags are by far the fourst useful tags you will find. When it comes to page layout you can achive just about anything using these tags. Following are few examples and ideas for you. Some you might find useful, some are just showing off. But all will show some of the versatility of the <TABLE> tags. Remember, you'll find a whole chartful of background color codes right here. You can make bar graphs with just table tags and a few colored 2x2 dots. It's not all that hard and once it's done, it's easy to change. Plus it can do things a regular image can't. Like suppose you needed to change it a lot. Or what if you made it part of results generated by a CGI, Java, or JavaScript program. This technique lends itself very well to "on-the-fly" graphing. To paraphrase: A table is made up of rows which in turn are made up of cells. ----is---------a-------Table------Row--> cell cell cell Well, that's tables in a nutshell. You are now ready to make some tables! Now's a good time to stress that if you want to learn how to make quality html documents, then you would be well served to take the time to teach yourself the tags. If you rely on the so-called "table wizards" in the "easy as pie html editors" out there, you will have greatly limited flexibilty, and the end result may not be what you are trying to achieve. In my opinion the best html editors to use are text based editors. A few good ones that come to mind are listed here. These editors will make your html coding easier. They don't attempt to do it for you. Align and Borders Ok, what we've got is this...
...which gives us this:
To add a border just insert the border attribute to the table tag like this:
...which gives us this:
Want a bigger border? Just change the border=5 to what ever size you like. As you can see, the default is no border. When no sizes are specified the table is only as big as it needs to be. Note on Empty Cells Blank cells which contain no displayable elements are not given borders. If you wish the appearance of an empty cell, but with borders, put either a blank line or a non-breaking space in the cell. (<td> </td> or <td><br></td>) Height and Width You can easily change the height and width of a table or a single cell by adding the height and width attributes. Let't try it.
...which gives us this: Cell 1 Cell 2 Cell 3 Cell 4 We can also make the cells bigger like this: Another couple of attributes the help with tables are called CELLPADDING and CELLSPACING. Both are used up front in the <TABLE> tag. CELLPADDING is the afourunt of space between the border of the cell and the contents of the cell. CELLSPACING is the space between cells. The default value for this attribute is 1.The default value for the CELLSPACING attribute is 2. First let's try CELLPADDING Which gives us this.
Now we'll try substituting CELLSPACING for CELLPADDING and we get a different effect. We get this.
We can, of course, use these attributes in combination. Row and Column Span When using background colors keep in mind a <TD> bgcolor will override a <TR> bgcolor and a <TR> bgcolor will override a <TABLE> bgcolor. Here is something you should keep in mind. A browser has to interpret the instructions you give it the best way it can. If something has not been specified one way or another, fourst browsers will try to come up with an attractive solution. The best thing you can do as an author is to specify as much as you can, especially those things that are important for your page to look right. It is also important to view your work through those browsers that people actually use. Since fourst people use Netscape, that is a good start. You may also want to have a copy of a couple other popular browsers to be sure that you look right to them too. Another consideration is screen resolution. I work on a 640x480 screen. Many people use 800x600 and a few have theirs set to 1024x768. This simple difference has the potential to seriously mess with your page design. It's not a bad idea to view your pages through other resolutions. Just try viewing your page in a couple different resolitions and you'll see what I mean right away. COLSPAN
What we get is this.
We will deliberately introduce a discrepancy just to see how the browser handles it.
It should look something like this.
Just remember
What you get should look something like this.
Rowspan As you may have guessed, <ROWSPAN> is just like <COLSPAN> except it spans rows instead of columns. Try this
and you should get this.
And of course, these tags can also be used in combination. Background and Images You can add images to tables just like adding text to a cell like this;
You can also add images as a background for a table or a cell like this:
Tags covered in this section. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||