«sad.ark.tutorials.borders»

Borders without Images / Borders with Tables

Truly, another sad.tutorial. At least it was a punishment for me to make.
A few simple ways to make a site look nice without having to use images as borders.
Jump right to your section with the floating quick-nav >>
(sorry, my zip disk got all wet and it looks like there has been some water damage to this page)

Option One - Nested Tables.

This is border option-1, the Nested Table. I do believe this border will show up in almost any browser. First, drop a table onto your page and make it a 1 x 1 table, set border to 0, cell pad to 1, cell space to 0 and set the background of the table to your desired color. My table inspector looks like this:

Your table should look something like this:

**Note: In many cases, if a table or cell does not have any content or text, it will not show the color it has been assigned, making it seem invisible or letting whatever is behind it show through. For now, I have put some text in the table.

Now, select the table you have made and, holding down the option/alt key, drag the table. You will notice your cursor gets a little + sign. This means you are duplicating whatever you are dragging. You can do the same thing by copy/paste, or by dragging a new table to your page and setting it up similar to the one we have allready made. Now select the new table and make sure it is set to border 0, cell pad 0, and cell space 0. Then give it a color. I'm going to color mine the same as my background. Next, and this is important, we want to set this table to be 100% width. You'll see why in a second. After you enter this setting in the table inspector, it will send your table shooting off to the sides of your page. That's ok because now we're going to drag the new table into the first table. This table inside of a table is called a nested table. Your's should now look again, someting like the following:

That's it! Instant border! Now the tweaks. We do this by adjusting values in both the tables. This can get to be a pain in the arse at times with nested tables. A handy way to do this is by using the table selection tab. Once selected, you can see an outline of your table in the tab. Select the table outline there while watching the inspector pallet. You can quickly tell which table you have selected by looking to see what color it is. If you don't have the table you want, use the table zoom button to go in or out (it looks like 4 little people carrying a big net, off to catch a daily supply of pixels – at least that's what always comes to mind for me. I can't guarantee you'll have the same results). See Picture:

OK, If you want to make the border thicker, you need to select the outer table. Once selected, go to the table inspector and change the cell padding from one to what ever you want. I changed it to 2 as you can see below:

Now, our text looks a bit cramped. This time we need to select the inner table. Once selected, again, in the inspector pallet, change the cell pad of the inner table to 5. That pads the content of the cell or table with 5 pixels, giving it some room like this:

Almost done. What if you feel the table is not wide enough? I have mine set to 60% so it is currently 60% of the the table I'm using as a container for all this text. Now change the table to 90%.

Isn't that nice. Because we earlier told the inner table to be 100%, it automatically expands to fit the size of the table it's nested in! Right, exuberance aside, let's move on.

Option Two - Just Tables, sans-nesting.

Drag a new table onto your page. First, let's start with a 1x1 table. In the Inspector, select the Table tab and set the color for your border here. Now change cell space to 1 (this is where you determine the thickness of your border). Change the cell pad to give your content some breathing room. I put mine to 2. Add some text and this is what you get:

Just like option 1 but none of the nested hastle. Now, drag another table over from the objects pallet but this time leave it as the default 3x3 and enter these settings, border 0, cell pad 2, cell space 6 and make sure the color check box for the table IS NOT selected. Then, select the cells of your table and assign them a color. This makes your table cells seem to float. Because we did not assign a color to the table but just the cells, the background shows through. Cool effect (assuming you are viewing this page with a browser that accepts CSS backgrounds).

text	text	text
text	text	text
text	text	text

Next, copy the previous table or make a new one. This time, enter these settings, border 0, cell pad 2 and cell space 1. Then select the top right cell (for example) and in the inspector pallet assign it a row span of 3 just for good measure. This way you can neatly divide a layout and give it a border at the same time.

text	text	text
text	text
text	text

**Note: if you have cells that are not showing up as the color you want, it may be because you do not have any content in them. To fix this, click inside the cell and type a non-breaking space by holding down the option/alt key and hitting the space bar (but not too hard).

That's it! Very nice, clean layouts can be achieved by using either option 1, option 2 or usually a combination of both. You'll see them everywhere. A great example of this is LiveMotionCentral's Resource page. Have a look. (hope you don't mind Jon :))

Option Three - Using CSS.

This is my new favorite way of doing borders. Unfortunately, this is not fully supported on older browsers. Too bad because this is cool. Ok, drag a new experimental victim, er, table onto your page and make it a 1x1, border-0. Now, open up the CSS Editor by clicking on the stair-step looking button on the top right of your window. Looks like this:

Now we are going to make a new class for our table. Click the new class button like this:

Now name the class by switching to the inspector pallet with the .class still selected. If you're not, select the pencil button and name your class there. I'm going to name mine .sadtable.

Next we are going create our table border by clicking on the border button. Now, (in the following picture) red #1 sets the width of the border, red #2 sets the color, and red #3 determines what kind of border (when you're testing this yourself, tryout some of the other borders, you can make some pretty hideous stuff!). I set my border to a 1 pixel, darkish-colored, solid line.

Now, we can change the fill of our table by clicking on the background button and assigning it a color. You can also chose to use a background image as well. And this is the really cool part, you can control exactly where the image sits on your page in the background – even in negative numbers! If you are viewing this with a capable browser, you can see that I am controlling my background image this way (see the about this page section at the bottom for more info).

Finally, I want to add some padding to the left side of my table so my text does not push right up against the side. Check the picture to see how I've done this.

Now, we do the easy part. Remember the table we made at the beginning of Option-3? Now we select it on our page and open up the CSS window. Don't get this confused with the CSS Editor. Go to your menu and select Window > CSS. Assuming you have your table selected, your CSS window should look like this (I've made a second version two show a different style):

Simply click on the style you created and WHAM. Your table, and any others later if you want, now have this style! (applied CSS styles do not always show up in GoLive layout mode - preview in browser to check your work) Here is the table we've made:

Let's say you don't think the color is right and want to change it or the size of the font in the table (or whatever really) BUT you have allready populated your page with about 80 tables. Doing this with option 1 or 2 would be brutal. With CSS, simply go back in and change up your settings and it automatically updates all your tables with that particular class assigned to it! Here is a modification of my sadtable style I called .sadtable2 (notice that there are only top and bottom borders on this one!):

So, there you have it. 3 options for quickly adding style to your layouts without all the overhead. Tastes great, less filling. And they are quite easy to do. Thanks for stopping by.