Member Avatar for cancer10

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

  • 3 Contributors
  • 3 Replies
  • 125 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for MidiMagic

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>
Member Avatar for rixius

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.

Member Avatar for MidiMagic

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.