Loading Page
Toolbar
U-Trade tutorials
Hello Guest
Links
Google Search
search
categories
css
css
html
html
    »   Implementations
    »   Tables
    »   Tags
    »   Marquee
javascript
javascript
photoshop
photoshop
php
php



Paypal
sitemap
contact
request tutorial
recommends
Do you have something to do in code, design or animation and you don't know how?
Send us an e-mail and will do a tutorial which will solve your problem.

10 Random Tutorials from all categories and subcategories
tutorials U-Trade
tutorials U-Trade
Tables with rounded corners : U-Trade
+ Share and Enjoy
Author: Cristea Iulian



Vote up
Vote down
Vote this article
We can create tables with rounded corners in html with a little trick.

This is a sample text
Put here your content
You can resize this table as much as you need vertical and horizontal


First of all we need to create a square in Photoshop or any other drawing application. This square should have the color that we need the table.

In Photoshop you can create this using the "Rounded Rectangle Tool". Before drawing it don't forget to set corners size by modifying its radius.

After all of this are complete, all we need is those 4 corners. Use slices to split your drawing. If you don't know where those are, check on the left and top of your image at rulers. If you don't see those too, check in menu at View - Rulers.

You'll need 4 slices, 2 verticals and 2 horizontal as close as possible on margins but be sure that you'll obtain those corners properly.

After this cut all your corners and put them in different files. This is all you need from Photoshop. In this way you can have a resizable table with a minimum of images. You can use them in multiples tables and are low size and there is no problem for transferring your web page faster.

Now let's create the HTML code that will use for showing our table. 
<table cellpadding="0" cellspacing="0" width="500">
	<tr>
		<td width="9" height="9">
		 <img src="left_top.gif" width="9" height="9" alt="" />
		</td>
		<td bgcolor="#ffae00" width="482"></td>
		<td width="9">
		 <img src="right_top.gif" width="9" height="9" alt="" />
		</td>
	</tr>
	<tr>
		<td bgcolor="#ffae00"></td>
		<td bgcolor="#ffae00" align="center">
			This is a sample text
		</td>
		<td bgcolor="#ffae00"></td>
	</tr>
	<tr>
		<td bgcolor="#ffae00" height="9">
		 <img src="left_bottom.gif" width="9" height="9" alt="" />
		</td>
		<td bgcolor="#ffae00"></td>
		<td bgcolor="#ffae00">
		 <img src="right_bottom.gif" width="9" height="9" alt="" />
		</td>
	</tr>
</table>

We need a table with 3 rows and 3 columns. In each corner table we put our images in the exact position. In the rest of cells we'll put background color and in the main one will have our content too.

That's all. Have fun.


+ post a comment


sitemap   |   terms and conditions   |   contact
U-Trade © All rights reserved 2006-2008 | Tables with rounded corners : U-Trade : U-Trade Tutorials