Who ever heard of such a thing! Well, you have, if you've read last month's "Set the Table" column by Sally. Here's the link, in case you haven't read it, or in case you want to refresh your memory:
http://tandemtables.com/TRIBUNE/10-04/SETTABLE10-04.html
The great thing about using Class CSS is that you set it all up in the head of the page. Then you don't have to keep repeating it in the body. You can go wild with many different Class items, too. But then you have to remember which one is which. So best not to use too many. Certain table attributes can not be put into the Class part of the head, as they are used only by MSNTV. But there's a way around this. We can stick them into a Byte Budget script.
First, take a look at this 200x200 grid for a table:
c/c/p codes
Now that's a whale of a lot of <td> tags, 100 of them! Let's say we want to use only 3 bgcolors in all those cells. Ordinarily we'd have to spell out the bgcolors, gradcolors and gradangles in every cell. But we don't have to with CSS Class combined with Byte Budget.
- First set up the new page in your file manager and give it a url, head tag and title.
- IN THE HEAD, after the title tags, put the following tag: <style type="text/css">
- Each class item starts with a period, then a name, then a curly bracket containing the specifics for that particular class item (do NOT use quotation marks), and ending with the reverse curly bracket:
.red {background-color:#ff0000; height:20px; width:20px}
.white {background-color:#ffffff; height:20px; width:20px}
.green (background-color:#00ff00; height:20px; width:20px)
</style></head>
Unfortunately, we can't use gradcolor and gradangle in the class tags. But we can add them, using the Byte Budget script in the body of the page.
OK, that takes care of the head tag. Now write the body tag, the JS warning (and a sound file tag, if you wish).
- IN THE BODY: after the JS bug warning and music file comes the Byte Budget script. First, write this tag:
<script>
- Now come the variations:
var a = "<center><table border=0 cellspacing=0 cellpadding=0><tr>";
var b = "<td class=red gradcolor=ffcccc gradangle=0></td>";
var c = "<td class=white></td>";
var d = "<td class=green gradcolor=ccffcc gradangle=0></td>";
var e = "</tr><tr>";
var f = "</tr></table></center>";
Now we save ourselves some more file space by combining the above variables by table row, making new variables which we'll use to actually write the script that creates the table. Since there are 10 rows, we could have 10 variables. But for a design that's symmetrical, we'll need less than 10 variables, depending on the design:
- The following variables are written right beneath the above ones. No curly brackets or quotation marks needed:
var A = a+b+b+b+b+b+b+b+b+b+b+e
var B = b+c+c+c+c+c+c+c+c+b+e
var C = b+c+d+d+d+d+d+d+c+b+e
var D = b+c+d+c+c+c+c+d+c+b+e
var E = b+c+d+c+b+b+c+d+c+b+e
var F = b+b+b+b+b+b+b+b+b+b+f
- Writing the table with the script. The following is typed immediately after the variables:
with(document){
write(A+B+C+D+E+E+D+C+B+F);
}
</script>
- Write the closing body and html tags. And the table and page are finished!
Tidbit Table example ~ ~ ~ C/C/P Codes |
