Introduction Text Links Images Backgrounds Tables Colors Utilities and other tips

Carpentry without even needing to get dirty... Alright, this is one section you’ll probably want to use. Tables are really hand when it comes to things like charts, dividing sections of text, making columns of text, and countless other implications. What a table is, is a box that you can put anything in basically, then divide that box up into smaller boxes creating a sort of grid-like system. I don’t use complex ones but if you like the ones that are uber confusing, containing several small divisions within divisions within divisions...while the cell next to it is large enough to house all those divisions...more power to ya, just be prepared for lots of confusion. Rows, Columns, and Cells...OH MY!! When you’re making a table, it’s broken up into the three portions listed in the heading, rows, columns, and cells (oh my). A row is a horizontal line of cells, a column being a vertical line of cells, while a cell is an individual box within a table. It’s a little confusing when you’re new to it but it’s pretty simple after a few attempts. It requires a skill that you should have already gotten used to by now called ‘Nesting’ which goes something like this...if you have three tags, one inside the other inside the other, the first one you open is the last one you close, and the last one you open is the first one you close. Think hierarchy. You’ll get to see this first hand in the example. <table> <tr> <td> Alright, to start a new table, use the <table> tag. Simple enough right? Good. Next, you add a row using the <tr> tag. Again, pretty simple. After that, you add a column with <td>. This makes a cell...think about it. You’ve got a box, first you draw a line down the middle vertically, then another horizontally. That makes 4 individual boxes that make a larger box. One of those 4 boxes is a cell. (yes, what I just said makes sense. You draw a vertical line down the middle and you have two cells side by side, making a row of cells. You draw a line down the middle horizontally and you get two cells one above the other making a column of cells. Put them together and you get two columns and two rows. Can you say ‘simple’? Sure...I knew you could.) When you have entered your text/image, close your tags in the proper order. Meaning, you close them like so... </td></tr></table>. No problem quick and easy. That makes a table with only ONE cell. To make more cells, just open either the <tr> or <td> tags. I’ll show you how to make more than one of each and how to determine which is which so you don’t lose your place. <table> <tr> <td> This is row one, left side. 1 </td> <td> This is row one, right side. 2 </td> </tr> <tr> <td> This is row two, left side. 3 </td> <td> This is row two, right side. 4 </td> </tr> </table> yields... This is row one, left side. 1 This is row one, right side. 2 This is row two, left side. 3 This is row two, right side. 4 As you can see, it’s fairly straightforward. Starting from the innermost open tag, you close them in the order they were opened. If you have multiple cells, then close them as is appropriate. It may take some trial and error. As displayed in the example portion of the code, the tags that are indented the most are the inner most and those are the ones that get closed first, the rest follow in their proper order. <table> <tr> <td> This is cell 1. </td> <td> This is cell 2. </td> </tr> <tr> <td> This is cell 3. </td> </tr> </table> This is cell 1. This is cell 2. This is cell 3. As you can see, without the proper properties used, you cannot divide or merge cells together. That part will come later in this page with an example of what it looks like. Something to keep in mind…NOTE: You CANNOT have text appear outside of a <td> tag. That would put it outside of a cell and you can’t do that within a table. Your text will simply not appear. If you don’t believe me, play around with it and see what happens. After all, you can still go back and change it if you don’t get a desired result. This is the most confusing part of using HTML (in my opinion) so if you have trouble, just fiddle around with it but think it out logically. Draw out your table on a piece of paper first, label each cell and think out how you have to code it. The actual construction is only the beginning, next we have the various attributes. Table and Cell properties You’ve got a couple of things to remember when dealing with table attributes. Number one, you have two different kinds...table properties, and cell properties. Table properties apply to the WHOLE table, while cell properties apply to just one cell. (obvious, right?) Number two, you can put almost anything in a table, even another table. When you have a table inside a table, the inner table will NOT take on its ‘parent’ table’s properties. You’ll have to put them in again if you want them to be the same. Tag Attribute Value What it does <table align= background= bgcolor= border= bordercolor= bordercolordark= cellpadding= cellspacing= nowrap> frame= valign= width= left> center> right> filename> (color code)*> n> (color code)*> (color code)*> number of pixels> number of pixels> -none- void> above> below> lhs> rhs> hsides> vsides> box> top> center> bottom> n**> n%***> Aligns the whole table left, center, or right Specifies the image to be used as background Specifies color to be used as background Makes the border n pixels thick Specifies the color of the border Specifies the color of the table shadow Space between cell border and content Space between individual cells Disables linebreaks if content is wider than browser window Removes all outer borders Shows border on top of table Shows border on bottom of table Shows border on left side of table Shows border on right side of table Shows border on both sides of table Shows border on top and bottom of table Shows border on all sides of table Aligns content to the top of each cell Aligns content to the center of each cell Aligns content to the bottom of each cell Minimum width of table in pixels Minimum width of table in percentage of window size * as in the text section, color codes will be discussed later ** n = number of pixels *** n% = the percent of the current window’s size As with every tag that has more than one attribute, you can put in as many or as few as you like...just make sure you’re using the right properties for the right tag. Those were the attributes for the <table> tag, now to go on to the cell properties, that means it will be attributes used in either <tr> or <td>. Attributes that can be used in both <tr> and <td> align background bgcolor bordercolor bordercolordark valign width height The attributes that are repeated from above are treated the same in both cases, the only thing that’s new here is ‘height’ which you treat just like ‘width’. It’s really not that difficult. Come on people...use your heads here. It can be measured in either pixels or percentage of the current browser window. Something to keep in mind here, if you use a property in either <tr> or <td>, it will OVERRIDE the table properties. They take higher priority than the table’s properties and will end as soon as the block they effect is closed. Now, DO NOT FORGET TO CLOSE YOUR TAGS!!! IF YOU DON’T, IT WILL COMPLETELY SCREW UP YOUR TABLE!! Alright, now we move on to the last three attributes, the only three that MUST go in the <td> tag. With the exception of ‘nowrap’, they will not work anywhere else, so don’t try it ya schmoe. Attributes that can be used in both <tr> and <td> colspan=n nowrap rowspan=n Colspan=n What this does is it tells the cell you put it into how many columns to span. In essence, it will ‘merge’ it with however many cells you tell it to. And the ‘n’ is a variable, in its place you put a number...again…use your heads people. Rowspan=n This does the same thing as Colspan except instead of columns, it’s rows. For whatever number you put in place of n, it will make the cell you put this property into that many rows long. To clear up a little confusion, colspan stretches a cell horizontally, while rowspan stretches a cell vertically. If you think it’s the other way around, try it and see for yourself. It’s tricky...I said this was confusing. Don’t feel bad if you don’t get it on the first try, that’s why we have a ‘backspace’ key on the keyboard. Example time! Here’s an example of how colspan and rowspan are used. Use it wisely my young...or old...patawans *coughs* Yes...you all are young, don’t look at me that way... test cell 1 test cell 2 test cell 3 test cell 4 <table> <tr> <td rowspan=3> test cell 1 </td> <td> test cell 2 </td> </tr> <tr> <td> test cell 3 </td> </tr> <tr> <td> test cell 4 </td> </tr> </table> test cell 1 test cell 2 test cell 3 test cell 4 <table> <tr> <td colspan=3> test cell 1 </td> </tr> <tr> <td> test cell 2 </td> <td> test cell 3 </td> <td> test cell 4 </td> </tr> </table> Remember...in order of priority, you close your tags in this order... 1. td 2. tr 3. table and I recommend you use the same principle when dealing with other tags. It will save you from a world of headaches and forced aspirin overdoseing. Well, that’s pretty much all there is to tables, just fiddle with them however you like until you get a result you like. That’s one great thing about HTML, no need to compile and wait to see what you’ve come up with. Just save, and open the modified file.