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> Code (markup): Please help Thanx
Well first, you want to lose the presentational markup on the table, and label the table with a class or ID as to what it is... For consistancy cross-browser, you want to use the border-collapse:collapse; setting, which CAN cause problems trying to assign borders on all sides of a table. The trick with border-collapse is you only can really assign borders on one side and have them show up in all browsers - so you put the right and bottom borders on the td, and the top/left on the table itself thus: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Template </title> <style> * { margin:0; padding:0; } .sectionBox { margin:10px; border-collapse:collapse; border:solid #000; border-width:1px 0 0 1px; background:#6E94B7; } .sectionBox td { padding:4px 8px; border:solid #000; border-width:0 1px 1px 0; } </style> </head></body> <table class="sectionBox"> <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> Code (markup): That is what you want, yes? Hope this helps.