Layers With Simple HTML: Tips for TablesTABLE align="..."We have a few options as to where we can put this table and how it will flex with the browser. Placement of the table is generally dictated by the "align" attribute of the TABLE tag. This attribute can be set to LEFT, CENTER or RIGHT. Using the LEFT or RIGHT values will shift the table to the corresponding side of the browser window and cause any other content outside of the table to wrap around the left over space. The CENTER value will move the table right to the middle of the screen and leave the surrounding content above or below the table, never to the side. Note that there is no effective way to set a TOP or BOTTOM value. Get over it. Simply position the table in terms of a long scrolling page; don't try to make it do something more than LEFT, CENTER or RIGHT. Trying to make a table line up to a particular vertical position is foolhardy and bound to lead to trepidation. TABLE width="..."Now that the placement of the table is set, we can work on the size of the table. The primary attribute for this is the WIDTH attribute of the TABLE tag. Generally speaking if you are using a layered technique in Simple HTML, the table should be set to width="100%". If your page is to be flexible and adapt to the user's needs, the table width must be set as a percentage rather than a specific number of pixels. In this case it comes down to intent. Is the designer really saying "This table needs to be 800 pixels wide," or is the real thought "I want this table to go all the way across the window or the screen." 9 times out of 10, it's the latter which means using a percentage width. TD width="..."To set the width of a column, we use the WIDTH attribute of the TD tag. Remember: all widths should be set in the first row of the table. Generally speaking, Netscape 4.x's layout engine only follows the commands that are directed by the top row of the table. If you want accurate results it's vital that there are no COLSPANs used in the first row of cells. The COLSPANs will wreck havoc on the display engine. In general, I recommend using percentage widths as often as possible, and don't worry too much about the math. For instance, if I want my page to have a left and a right margin, and the central area will be for most of my content, I'll set my widths to 15%, 75% and 10%. That works pretty well. And if I need a specific width for a column, I'll set it to that number of pixels and still use percentages for the others: 200, 90%, 10%. The width of a column may stretch or shrink based on the column's content. To keep a column from shrinking, you can put in a small transparent graphic that is the width that you need. To keep a column from stretching wider, it's important that the other columns take up their assigned width. Column A will stretch when the contents of Column B or C don't actually stretch all the way across the column's assigned width for the table. An easy way to take care of this is to more put more content in Column B and C! A less distracting way is to add a line to the content of a cell in Column B or C that looks something like this: That line creates a series of blank 'words' that have regular spaces between them. The blank words will not appear to the user, but will create a situation in which the invisible contents of the column will wrap and take up as much space as possible. This technique could be used in the central column in my example above, the column that I want to have take up all the extra width of the window. We're half way through the tables. Now that we've dealt with getting them in place and the right size, let's look at what goes inside. Article Contents: |
[ Read and write comments ]