Posts Tagged ‘HTML Table’

HTML Table Tips

in Web Design Tips |

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.

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(1×1 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.
Tags: