Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Intermediate
Jun 22, 2000

Simple Table Grids Without Images

When designing an internet application that must provide results in a grid, many developers will use small (1 pixel by 1 pixel) images in order to create a grid effect (similar to an Excel spreadsheet). An easier way to accomplish this task is to use nested tables.

By combining two levels of tables, you can effectively create a grid effect. Also, you'll be reducing the chance that the image is unavailable for download and that you'll have to repeatedly code the image tag and attributes.

In the first table, set the cellpadding and cellspacing attributes equal to zero and define a bgcolor—the color of the grid. In the nested table, set the cellpadding attribute to whatever you like, but use the cellspacing attribute to define the width of the grid lines. For example, cellspacing=1 will have small grid lines, while cellspacing=5 will have large grid lines.

Here's an example using nested tables:

 
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr>
	<td>
	<table border="0" cellpadding="0" cellspacing="1" width="100%">
	....Data....
	</table></td>
</tr>
</table>

Note: Tables are not rendered by the browser until the entire table is received during the download of the HTML page. Extremely large tables can take some time to render which may cause users to think that your page is slow.

Matt Usher
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date