How to draw these borders

I like the borders of the forums like this. Can someone tell me how to draw a border in HTML/CSS as shown in the screenshot.

[IMG]http://img91.imageshack.us/img91/3292/fireshotcapture12helloimn7.th.jpg[/IMG]

I would like to have the bordercolor as well. The following HTML does not work perfectly on all browsers :(

I mean, with

FF - The code works fine
IE - Works but displays a thicker border compared to FF
Opera - Does not show the border color

<table border=1 bordercolor="#6E94B7" cellspacing=0 cellpadding=0>
<tr><td>Hello 1</td><td>Hello 2</td><td>Hello 3</td></tr>
<tr><td>Hello 4</td><td>Hello 5</td><td>Hello 6</td></tr>
<tr><td>Hello 7</td><td>Hello 8</td><td>Hello 9</td></tr>
<tr><td>Hello 10</td><td>Hello 11</td><td>Hello 12</td></tr>
</table>

Please help

Thanx

cancer10

Posting Whiz in Training

234 posts since Dec 2004

Reputation Points: 58

Solved Threads: 1

4 Years Ago

I like the borders of the forums like this. Can someone tell me how to draw a border in HTML/CSS as shown in the screenshot.

I would like to have the bordercolor as well. The following HTML does not work perfectly on all browsers :(

I mean, with

FF - The code works fine IE - Works but displays a thicker border compared to FF Opera - Does not show the border color
<table border=1 bordercolor="#6E94B7" cellspacing=0 cellpadding=0>
<tr><td>Hello 1</td><td>Hello 2</td><td>Hello 3</td></tr>
<tr><td>Hello 4</td><td>Hello 5</td><td>Hello 6</td></tr>
<tr><td>Hello 7</td><td>Hello 8</td><td>Hello 9</td></tr>
<tr><td>Hello 10</td><td>Hello 11</td><td>Hello 12</td></tr>
</table>
Please help

Thanx

Use stylesheets instead of the deprecated border and bordercolor attributes of the table tag:

<html>
<head>
<title>My Title</title>
<style type="text/css">
.tablebord {border: 1px #6e94b7 solid; border-collapse: collapse;}
</style>
</head>
<body>

<table class="tablebord">
 <tr><td>Hello 1</td><td>Hello 2</td><td>Hello 3</td></tr>
 <tr><td>Hello 4</td><td>Hello 5</td><td>Hello 6</td></tr>
 <tr><td>Hello 7</td><td>Hello 8</td><td>Hello 9</td></tr> 
 <tr><td>Hello 10</td><td>Hello 11</td><td>Hello 12</td></tr>
</table>

</body>
</html>

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

4 Years Ago

You forgot to give him the css to use with that. : )

tablebord { border: 1px solid #6E94B7; }

I wouldn't use this, however, because it fails to put the borders between cells.

If you want to have a cross thatched border, set the background of the table element to the border color, and change the cellspacing to 1.

That should do it for you.

rixius

Posting Whiz in Training

233 posts since Nov 2003

Reputation Points: 12

Solved Threads: 3

4 Years Ago

I forgot to put it in the td tags too. I was sleepy at the time.

<html>
<head>
<title>My Title</title>
<style type="text/css">
.tablebord {border: 1px #6e94b7 solid; border-collapse: collapse;}
</style>
</head>
<body>

<table class="tablebord">
  <tr>
    <td class="tablebord">Hello 1</td>
    <td class="tablebord">Hello 2</td>
    <td class="tablebord">Hello 3</td>
  </tr>
  <tr>
    <td class="tablebord">Hello 4</td>
    <td class="tablebord">Hello 5</td>
    <td class="tablebord">Hello 6</td>
  </tr>
  <tr>
    <td class="tablebord">Hello 7</td>
    <td class="tablebord">Hello 8</td>
    <td class="tablebord">Hello 9</td>
  </tr> 
  <tr>
    <td class="tablebord">Hello 10</td>
    <td class="tablebord">Hello 11</td>
    <td class="tablebord">Hello 12</td>
  </tr>
</table>

</body>
</html>

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

This article has been dead for over three months

You