Table Border Styles
Introduction
The following will look at how to create different border styles for your tables, it's essential that you at least know how to create basic tables first, there's an introduction to tables located here if you need it.
Your table borders can be styled in a few ways, either from inside your .css file (stylesheet), inside the style tags in the head of your page or even within the table tags themselves.
First we'll look at the different border properties and then how to use them either in css files or directly in your pages.
Border Styles
The following are the different border "styles" that you can use within tables:
- solid
- inset
- outset
- ridge
- groove
- dashed
- dotted
- double
If you don't specify a border style, but do specify a size (we'll talk about sizes in a bit) then the border will take on the "solid" style by default.
Here's a couple of examples of the most popular border styles, and how they look.
|
|
|
With each of the examples there i've used a border size of 3 pixels, you'll find that with very thin borders (1 or 2 pixels) some of the styles such as double, ridge, groove are not really noticable.
Border Sizes
Moving onto the size of your borders. They can be specified in two ways, either with the values: thin, medium or thick or with a numeric value 1,2,3,4 etc here's some examples of tables using both.
|
|
|
|
|
|
You can see that using pixel sizes is a little more flexible.
If you don't specify a border size, even if you set a style then it'll be 0 by default and you wont see a border.
Adding your styles
As i mentioned there's different ways to add border styles to your tables, and it really depends on how you do all of the styling/formatting for your page.
Before we look at setting different styles on different sides, a quick explination on how to specify the styles in your tables:
Using a .CSS file (stylesheet)
Firstly you might want to look at this basic css tutorial there's a bit about using table borders in .css near the end there i think, but right now we'll just look at setting the size, style and color.
Lets say you wanted all your tables to have a 1 pixel, dashed, black border. This is how you could specify that in your .css file:
table { border: 1px dashed #000 }
Simple eh? you could if you wanted specify border-color, size and style seperately, but there's no point when you can do it all in one line.
Inside you table tags
Not really much difference in the code if you want to add the style directly into your table tags.
<table style="border:1px dashed #000">
So it's quite simple, the three main border elements "size" "style" "color" and there's a huge number of different border types you can create with just those three values.
Which Sides?
Finally, we'll look at one more part of table border styles, the frame element. I think it can be a little confusing being called the "frame" element seeing as it has nothing to do with the normal types of frames you might be talking about when creating web pages, but it makes sense if you think about it, the "frame" (outside edge) of the table.
These are the different frame elements that you can use in tables, which basically define which sides you'll see a border on.
- lhs - Border on left hand side only
- rhs - Border on right hand side only
- box - Border on all four sides
- above - Border on top side only
- below - Border on bottom side only
- hsides - Border on top and bottom sides only
- vsides - Border on left and right hand sides only
- border - Border on all four sides
- void - No border (default value)
If you don't use a frame element inside your table, the default value is "void"
I'm sure it's obvious how you'd apply this but just incase:
| Using frame="hsides" in the table tag |
| Using frame="rhs" in the table tag |
There you go, weird looking tables.