Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
Creating HTML Borders of Any Type (Exclusive Tutorial)
by Reiven
Changing Table Background on MouseOver
by Ades Tynyshov
Expanding Table
by Andy
Website Design
by Ades Tynyshov
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Table Properties
rss

Table Properties

Author: Michael Aldworth More by this author

Added: Mar 07, 2005 Rating:  Average Rating: 2.44 Votes: 103 Position: 11884 of 13056Average Rating: 2.44 Votes: 103 Position: 11884 of 13056Average Rating: 2.44 Votes: 103 Position: 11884 of 13056Average Rating: 2.44 Votes: 103 Position: 11884 of 13056Average Rating: 2.44 Votes: 103 Position: 11884 of 13056 Level: Experienced Software:  DreamweaverGoLiveFrontPage

1. Ever wonder how to get your table border as thin as 1px but when you se border="1" and it looks like 2 or 3 px wide? Well here's how. First within the table tag we will add a CSS code (Cascading Style Sheet). To do this we add style=" " parameter.

<table cellpadding="0" cellspacing="0" border="0" width="250" align="center">
<tr>
<td style="border-top:1px #FFFFFF solid; border-bottom:1px #FFFFFF solid; border-right: 2px #FF0000 dashed;border-left:2px #FF0000 dashed;"><br>Text Here<br></td>
</tr>
</table>

So the above code will output the following.


  Text Here

2. One other neat effect is you can make your table look like its 3D and popping out of your webpage. Basically we make the borders solid and make the line width 3px (2px will prolly work also). Here's how:

<table cellpadding="0" cellspacing="0" border="0" width="250" align="center">
<tr>
<td style="border-top:3px #E6E6E6 solid; border-bottom:3px #595959 solid; border-right: 3px #595959 solid; border-left:3px #E6E6E6 solid;"><br>Text Here<br></td>
</tr>
</table>

That above code will output:


   Text Here

There you have it, some neat effects you can add to your websites table to make them even cooler.


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Table Properties"