Tips & Tricks
Using Tables
<table> <tr> <th> </th> <td> </td> </tr> </table> |
A table is made up of 4 parts.
|
||||||||||||
The table to the left is a simple 1 cell table with a border and centered text. To create this simple table, here's what you need. Look for the 4 tags described above in this example. Find the start and end of the table. In the start tag, you'll see the width and height of the entire table. You can alter the width of the border by increasing the border value from "1" to "2" for instance. You can set the spacing between cells, making a more pronounced spacing between the columns and rows. You can increase the padding inside each individual cell as well, which help in viewing the text within your table. The table tag defines the entire table, where the <TD> or Table Data Cell tag defines the attributes of a specific cell. In this example there's not much to define, just the alignment of the text within the cell.
|
|||||||||||||
This table utilized the table header tag. The <TH> tag automatically tells the browser to center and bold the text within the cell. But to further separate this row, I've added a background color to the cell and altered the color of the text to make it stand out. Here again you'll see the <table> tag. The <tr> tags to start 2 different rows. In the first row, you'll see the <th> to start the table header, but you'll also see the parameter setting the back ground color of this row. Within the table header, you'll see a <font> tag and the color parameter setting the Table Header text to white. The remaining row on the table is like the one described above.
|
|||||||||||||
|
|||||||||||||
|
The example to the left is exactly like the table used to format this page. The only difference is, the height and width of the two columns. Setting these parameters can be a very helpful tool when you don't want to code frames for your web site. Although frames are easy to create and easy to manage, many visitors on the web don't like frames. You can use the table tags to give the same effect without the hassles.
The small table to the left is an example of this effect with the border turned on. The following is the code needed to create this table. The Width parameters within the TD tag, tells the browser how large to make the columns. The TD width parameters are defined in percentages, instead of the pixel setting you'll see in the Table tag. The first column will take up 19% of the tables 125 pixels, the second column will take up the remainder 81%.
|
||||||||||||
Nested Tables
Here's the same table above, with the outer tables border turned off by setting the border to "0".
|
Placing a table inside a table can help you further format your text within your web page. To nest a table, you simply place the same tags described here inside a single table data cell. This method of nested tables is what I've used to help format the text within these Tips & Tricks pages. This allows us to place a bulleted item with a heading above a formatted set of text as depicted to the left. You'll see an additional parameter within the TD tag called VALIGN. This parameter tells the browser that the contents of the data cell are vertically aligned at the top. <TABLE WIDTH="133" HEIGHT="37"
BORDER="1" Personally I think this type of nesting is more effective when the table border is set to "0". The second table on the left is a duplicate of the first, but the table border of the outer table is set to 0. |
||||||||||||
One of the biggest disadvantages to using a lot of tables is the amount of time a browser spends trying to load it. A clean table, that's a table without a lot of extra code, can load fairly quickly. But a table with extra HTML tags can take longer, and can even hangup some browsers. If you're using native HTML to create a table, you can generate the desired result with the least required HTML commands, because you are controlling the code. But if you're using any of the new HTML Editors, such as HotMetal, HotDog, PageMill, or FrontPage, the editor will add tags, whether you need them or not. The browser will then be forced to "read" each tag, even if it's not necessary for the data you're displaying. The browser still has to read each tag inside each individual cell. This is where the problem with loading time occurs. If you don't know HTML, how can you avoid this type of problem? That's hard, but it is possible. First use an HTML editor that doesn't just assume it knows what you want to do inside your code. Today, Adobe's PageMill does add some tags you don't necessarily need, it adds the least compared to FrontPage and HotMetal. |
|||||||||||||
|
|
|||||||||||||
