How to make rounded tables

Now you’ve completed design, so lets move on to coding.



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:

html code for whole header would look like this:

It might need to be adjustted a little bit by adding padding-bottom or padding-top to .rounded-corner2, and decreasing height by same amount that you’ll use on padding.



2. Table.



In css add code similar to this:

html code for while header would look like this:

Additionally for both methods you might want to add css for links in rounded header to override default links: