943,682 Members | Top Members by Rank

Ad:
Mar 11th, 2008
0

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


Please help

Thanx
Similar Threads
Reputation Points: 58
Solved Threads: 1
Posting Whiz in Training
cancer10 is offline Offline
234 posts
since Dec 2004
Mar 11th, 2008
0

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)
  1. <table border=1 bordercolor="#6E94B7" cellspacing=0 cellpadding=0>
  2. <tr><td>Hello 1</td><td>Hello 2</td><td>Hello 3</td></tr>
  3. <tr><td>Hello 4</td><td>Hello 5</td><td>Hello 6</td></tr>
  4. <tr><td>Hello 7</td><td>Hello 8</td><td>Hello 9</td></tr>
  5. <tr><td>Hello 10</td><td>Hello 11</td><td>Hello 12</td></tr>
  6. </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)
  1. <html>
  2. <head>
  3. <title>My Title</title>
  4. <style type="text/css">
  5. .tablebord {border: 1px #6e94b7 solid; border-collapse: collapse;}
  6. </style>
  7. </head>
  8. <body>
  9.  
  10. <table class="tablebord">
  11. <tr><td>Hello 1</td><td>Hello 2</td><td>Hello 3</td></tr>
  12. <tr><td>Hello 4</td><td>Hello 5</td><td>Hello 6</td></tr>
  13. <tr><td>Hello 7</td><td>Hello 8</td><td>Hello 9</td></tr>
  14. <tr><td>Hello 10</td><td>Hello 11</td><td>Hello 12</td></tr>
  15. </table>
  16.  
  17. </body>
  18. </html>
Last edited by MidiMagic; Mar 11th, 2008 at 2:28 pm.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Mar 13th, 2008
0

Re: How to draw these borders

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

HTML and CSS Syntax (Toggle Plain Text)
  1. 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.
Reputation Points: 12
Solved Threads: 3
Posting Whiz in Training
rixius is offline Offline
212 posts
since Nov 2003
Mar 15th, 2008
0

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)
  1. <html>
  2. <head>
  3. <title>My Title</title>
  4. <style type="text/css">
  5. .tablebord {border: 1px #6e94b7 solid; border-collapse: collapse;}
  6. </style>
  7. </head>
  8. <body>
  9.  
  10. <table class="tablebord">
  11. <tr>
  12. <td class="tablebord">Hello 1</td>
  13. <td class="tablebord">Hello 2</td>
  14. <td class="tablebord">Hello 3</td>
  15. </tr>
  16. <tr>
  17. <td class="tablebord">Hello 4</td>
  18. <td class="tablebord">Hello 5</td>
  19. <td class="tablebord">Hello 6</td>
  20. </tr>
  21. <tr>
  22. <td class="tablebord">Hello 7</td>
  23. <td class="tablebord">Hello 8</td>
  24. <td class="tablebord">Hello 9</td>
  25. </tr>
  26. <tr>
  27. <td class="tablebord">Hello 10</td>
  28. <td class="tablebord">Hello 11</td>
  29. <td class="tablebord">Hello 12</td>
  30. </tr>
  31. </table>
  32.  
  33. </body>
  34. </html>
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline 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.
Message:
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





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC