How to make rounded tables
But before you move to coding you should export images from Photoshop. To do that select option “save for web” in menu “file”, change your slices to gif format, click “save”. Now you have 3 corner images.
2. Coding
I’ve seen many designs that use rounded headers and work well only in one particular browser (usually IE, sometimes IE and Firefox), but look awful in other browsers. Why? Because after slicing image designer uses ImageReady or any WYSIWYG editor to make html code for it and those tools generate html code that is full of bugs.
You should avoid using those tools. Its very easy to make proper html code for rounded header in simple text editor. I recommend EditPlus or TextPad.
There are two ways to code header: tableless html code using divs and table. So which one to choose?
Tableless design is good if you have only one block of text in header, so you’ll have left corner, right corner, content in middle. So it will work well for most phpBB 2.0 styles, hovewer more complex forum systems, such as vBulletin, IPB, SMF and phpBB 3.0 sometimes have content on right side of header, such as popup menus, minimize/maximize button, etc… these will be tricky to code if you don’t know (x)html/css very well, so then you should use table because you can add as many table cells in middle as you want.
1. Divs.
In css add code similar to this:
- .rounded-table { background: url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/z4hs24d5v5sefoni0rgcnd65303/files/images/table_bg.gif) bottom left repeat-x; }
 - .rounded-corner1 { background: url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/z4hs24d5v5sefoni0rgcnd65303/files/images/table_left.gif) bottom left no-repeat; }
 - .rounded-corner2 { background: url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/z4hs24d5v5sefoni0rgcnd65303/files/images/table_right.gif) bottom right no-repeat; padding-left: 30px; padding-right: 20px; height: 28px; font-weight: bold; font-size: 12px; text-align: left; margin: 0; white-space: nowrap; overflow: hidden; }
Â
-
Table Header
Â
2. Table.
In css add code similar to this:
- .rounded-table { background: url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/z4hs24d5v5sefoni0rgcnd65303/files/images/table_bg.gif) bottom left repeat-x; }
 - .rounded-table td { height: 28px; white-space: nowrap; background: none; } /* background set to none to override background for certain table cells such as vbmenu_control for vBulletin */
Â
Â
 - Â
Â
- Â
Table Header Â
- Â
Â
Â
Â
Additionally for both methods you might want to add css for links in rounded header to override default links:
- .rounded-table a:link, .rounded-table a:visited { text-decoration: underline; color: #3F749B; }
 - .rounded-table a:hover, .rounded-table a:active { text-decoration: none; color: #E3962D }Â