Click here to sign up for a FREE Refer-it Webmaster Account
Find a job or the right person
|
|
|
Table Tricks and Truths
(Part 2)
By Peter Cooper
Gaps and Spaces
Many intermediate and advanced HTML coders will already be aware of cell borders, padding and spacing. However, there are coders who continue to ask questions about these aspects of coding tables, and this is the best place to cover them.
The CELLPADDING, BORDER, and CELLSPACING attributes should all be within the TABLE tag to guarantee compliance between the two main browsers.
The CELLPADDING attribute defines the amount of pixels to pad a cell with. Your cell may be 400 pixels wide, but if the cellpadding is set at 5 pixels, then an internal border of 5 pixels will be present within the table. It's not visible, but it's there so that your content doesn't sit right on the edges of the cell. As such, a 400 pixel wide cell with 5 pixels padding, has an effective usable width of 390 pixels.
The BORDER attribute defines the padding around the entire table. When BORDER is not equal to zero, a visible border will be placed around the outside of the table which is x pixels wide (x being the value, in pixels, assigned to the BORDER attribute). The border gives the entire table a 'raised' feel making it look slightly more 3D. An example is shown below:
| This table has a border of 5 pixels.. and this cell has a padding of 10 pixels, as defined by CELLPADDING. |
| This table has a border of 2 pixels.. and this cell has a padding of 2 pixels, as defined by CELLPADDING. |
The CELLSPACING attributes defines the space between all cells. This allows breathing space between the cells, and doesn't squash the content of the cells at all, as with CELLPADDING. Some examples are shown below:
| This table has a CELLSPACING of 12 and a CELLPADDING of 0. | This table has a CELLSPACING of 12 and a CELLPADDING of 0. |
| This table has a CELLSPACING of 3 and a CELLPADDING of 0. | This table has a CELLSPACING of 3 and a CELLPADDING of 0. |
<table border=x cellpadding=y cellspacing=z>Want any specific table questions answered? If so, e-mail your queries, suggestions and comments to pcooper@internet.com
This article first appeared in January, 2000.
Copyright © 1999-2000
internet.com Corp.All Rights Reserved. Legal Notices.
Contact the WebDeveloper.com® staff
Last modified: Thu Jun 15 06:11:36 EDT 2000
Refresh Daily
Join Editor-in-Chief David Fiedler
and find truth, justice, and a clue or two.
ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML
