Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 5201

Mar 11th, 2008

How to draw these borders

Expand Post »

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

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

Similar Threads

Need help with repainting Graphics in Java
help please asap! in C++
Identifying Drivers needed in Windows 95 / 98 / Me
C++ Graphics (graphics.h) in C++

cancer10

Reputation Points: 58

Solved Threads: 1

Posting Whiz in Training

Offline

234 posts
since Dec 2004

Permalink

Mar 11th, 2008

Re: How to draw these borders

Click to Expand / Collapse Quote 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
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:

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Mar 13th, 2008

Re: How to draw these borders

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

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.

rixius

Reputation Points: 12

Solved Threads: 3

Posting Whiz in Training

Offline

212 posts
since Nov 2003

Permalink

Mar 15th, 2008

Re: How to draw these borders

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

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>

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: General rules when working with divs and css.

Next Thread in HTML and CSS Forum Timeline: Email reply problem. Please HELP

DaniWeb Message

Cancel Changes

User Name
Password