Learn how to use 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.
|
|
|
|
|
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%. |
|
|
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.
|
|
|
|
|
|
|
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. |
|
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 animation, Flash programming, Instant Quote
|
|
|
|
|
Entheos
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. |
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
Web Services
Professional and cost effective web
design, development and promotion services |
|
|
|
Web Products
Interactive Web Products - Flash
animation, Flash programming, Instant Quote |
|
|
|
Web Services
Professional and cost effective web
design, development and promotion services |
|
|
|
|
|
|
|
|
|
|
|
|
|
|