HTML and CSS

How to draw these borders

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2004

Posts: 234

Reputation: cancer10 is an unknown quantity at this point

Solved Threads: 0

cancer10

Offline

Posting Whiz in Training

How to draw these borders

Mar 11th, 2008

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.

http://img91.imageshack.us/img91/329...lloimn7.th.jpg

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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

FocusInterview.com - PHP Interview Questions & Answers

IGCHosting - Cheapest Web Hosting

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: How to draw these borders

Mar 11th, 2008

•

Originally Posted by 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.

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
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
<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>
<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:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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>

Last edited by MidiMagic; Mar 11th, 2008 at 2:28 pm.

Daylight-saving time uses more gasoline

•

Join Date: Nov 2003

Posts: 207

Reputation: rixius is an unknown quantity at this point

Solved Threads: 1

rixius

Offline

Posting Whiz in Training

Re: How to draw these borders

Mar 13th, 2008

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

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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.

Google Chrome Message Board / Internet Marketing Strategy & SEO Techniques / Photoshop Tutorials

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: How to draw these borders

Mar 15th, 2008

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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>