Tables With Fancy Borders

A common way to highlight something on a web page is a prominent box - sometimes called a "Johnson Box". It might look something like this:

But, if you want to make it really stand out, you can easily add some color to the box, like this:

Mind you, the border looks rather horrible, doesn't it? Let's add a color to the border:

Let's look at the HTML for this box:

<table width="60%" border="1" align="center" cellpadding="10" cellspacing="0" bordercolor="#FF0000" bgcolor="#FFDFDF">
<tr>
<td>
Your text in here
</td>
</tr>
</table>

As you can see, I've used standard HTML to define the border color and the background color. I've also set the thickness of the border to "1"

Now lets get even fancier. How about this one:

So, how have I coded this box to get the dashed lines around the box. Here's the HTML:

<table width="60%" border="0" align="center" cellpadding="10" cellspacing="0" class="tborder2">
<tr>
<td>
Your text in here
</td>
</tr>
</table>

So, there's no apparent definition of the background color or the border color and thickness. Butwhat about that class="tborder2"?

I've used some CSS (Cascading Style Sheet) code to get this effect. All I've done is to put this code into the header section of the web page:

<style type="text/css">
<!--
.tborder2 {
background-color: #FFDFDF;
border: 2px dashed #FF0000;
}
-->
</style>

It's the CSS code which defines both the background color of the box and also what the border looks like. Even better, CSS means that you can have different styles of border. You are not just restricted to a solid line.

You can even have different styles of border around different edges of the box. Here's an extreme example, just to show you the different border effects you can get:

Here's the CSS code for that crazy effect:

<style type="text/css">
<!--
.tborder3 {
background-color: #FFDFDF;
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 4px;
border-left-width: 5px;
border-top-style: dotted;
border-right-style: double;
border-bottom-style: inset;
border-left-style: groove;
border-top-color: #FF0000;
border-right-color: #0000FF;
border-bottom-color: #996600;
border-left-color: #009900;
}
-->
</style>

Finally, let's use a sensible combination to make a Johnson Box which really does stand out:

Here's the CSS code:

<style type="text/css">
<!--
.tborder4 {
background-color: #FFDFDF;
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 2px;
border-top-style: dashed;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: dashed;
border-top-color: #FF0000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #FF0000;
}
-->
</style>

If you use CSS like this and embed it in the header section of your page, you can use it to have the same design of box anywhere on the page. All you do is to put a "class" attribute for the CSS into your table HTML:

<table width="60%" border="0" align="center" cellpadding="10" cellspacing="0" class="tborder4">

Even better, if you define the CSS styles in a separate file, a "style sheet", you can use the styles anwhere on your website just by inserting code like this in the header of each page:

<link href="images/wt-style.css" rel="stylesheet"
type="text/css" />

.. where you state the name and folder where your style sheet is located.

If you want some excellent tutorials on CSS, I can recommend w3Schools.com There's a huge amount of advice and info there.

I hope you've found this useful.

Regards

Ian Traynor
Professional Webmaster

P.S. If you want to thank me for this "trick", here's a PayPal donations button. Click on it to pay me anything you like, using either your PayPal account or your credit card: