Tables Tricks 'n' Tips
Using HTML tables creatively to design attractive and fast
loading web pages
Instead of designing graphic intensive web sites that take ages
to load, you can use HTML tables creatively
to get a professional looking web page that loads super fast.
This article discusses many useful table tips and tricks on designing
a great web page. Live examples and cut 'n' paste code are also
provided for you to try out some great designs. You can also check
out more handy tips 'n' tricks on designing
a fast loading web site.
Tips on using Tables
- Always give the width for each of the cells in a table. Make
sure that the total of the cells in a row adds up to the table
width. This will avoid many complications.
- Try not to merge or break apart cells within a table. This
again causes all kinds of problems.
- When using widths or heights that are less than 10 pixels
insert a shim or a transparent gif (1x 1 pixel). If you use
Fireworks you will find a shim in your Fireworks file, or you
can just export a 1x 1 transparent image and call it a shim.
This trick is mainly for a table to work in a Netscape browser.
- Netscape cannot understand height in percentages, so if you
ever need to give a height for your tables, make sure it is
in terms of pixels.
Let's try out some cool designs using only tables
|
Tables with white borders
The key here is to use a transparent image(1x1 pixel) called
a shim. The table is made of 3 rows and 3 columns. The width
and height of the middle row is 1 pixel. The table will
not take a height less than 5 pixels without you putting
an image in it. Hence the magic shim. And there you have
a striking table that can be used in your homepage to display
your important navigation sections.
|
|
Services
Professional
and cost effective web development
|
 |
Products
Interactive
Web Products - Flash Survey, Poll and more
|
|
|
|
|
Resources
Free
web development resources
|
|
Contact
Us
Contact
us for more details.
|
|
Cut 'n' Paste Code
|
|
Web
Services
Professional
and cost effestive web design, development and
promotion services
|
Web
Products
Interactive
Web Products - Flash Survey, Poll, Guest book,
Instant Quote
|
|
Web
Resources
Free
web resources - articles, tutorials, tips and
tricks
|
Contact
Us
Contact
us for more details - contact Us form, questionaire
or email
|
|
|
Table with a thin border
Have you ever wondered how to get a nice thin border instead
of the thick border that is automatically generated using
the 'border' property. Or have you ever wanted only the
table to have a border and not all the cells. Well the answer
to this is to make a table with the width you want and 1
as your cell padding. You then have to insert the actual
table inside this table with width 100%.
|
Cut 'n' Paste Code
|
Tables within a table - multiple tables in the same line
Here I have made a table with 2 rows and 5 columns
with cell padding 2 . There are different background colors for
all the alternate columns. In the first row I have written the
text for the heading. In the second row I have made a table of
width 100%, height 100% and cell padding 3. The whitespace between
the tables is a column of width 3 pixels.
Note: You cannot make 3 different table coming one after the
other in the same line. You can only make tables come one below
the other. If you want many tables in the same line you have to
make tables within tables.
|
Web
Services
|
|
Web
Products
|
|
Web
Resources
|
|
Professional
and cost effective web design, development and promotion
services
|
|
|
|
Interactive
Web Products - Flash Survey, Poll, Guest book, Instant
Quote
|
|
|
|
Free
web resources - articles, tutorials, tips and tricks.
|
|
Cut 'n' Paste Code
|
Table using the border property
Here's the simplest way to make a table with a border.
Use the border property to give a border for all the cells.
Neat and clean, this is the easiest way to create a table
with a border. Note: The border has a grayish tinge when
viewed in Netscape.
|
|
Web
Services
Professional
and cost effective web design, development and promotion
services
|
Web
Products
Interactive
Web Products - Flash Survey, Poll, Guest book and
more.
|
|
Merging Cells in a table - Try out a jazzy table like this in
your homepage.
You can also try merging and breaking apart cells
to get some really cool designs. Be careful when trying out this
method, as you can lose control over the table. Merging and breaking
apart cells make use of the 'rowspan' and 'columnspan'
properties of HTML.
|
|
|
|
|
|
Web
Services
Professional and cost effective web design, development
and promotion services
|
|
|
| |
Web
Products
Interactive
Web Products - Flash Survey, Poll, Guest book, Instant Quote
|
|
|
|
Smart
Webby
Your
key to a powerful Net presence
|
|
|
|
| |
Web
Resources
Free
web resources - articles, tutorials, tips and tricks
|
| |
|
|
Contact
Us
Contact us for more details through
our contact us form, questionnaire or email. |
| |
| |
Cut 'n' Paste Code
Using tables to design lines
This is a nice design because it has a lot of white
space. Remember that white space really makes a site looks clean
and readable. Again I have made tables within a table to get the
best effect. Try to do this one yourself using the techniques
I have describe above. Don't use any images. Only use HTML code.
Remember to use a shim. Have fun.
Cut 'n' Paste Code
written by Rachna Asirvatham.
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
