Home

1. Introduction

2. Basics review

3. WIDTH

4. VALIGN

5. BORDER

6. BGCOLOR

7. CELLSPACING

8. CELLPADDING

9. ALIGN

10. Table manners

11. Editors

12. Summary

13. Exercises

Classes home

HTML Info home

Width

As you'd guess, width attributes allow you to define how wide your tables and columns are.

Without them, the user's browser renders the table just by whatever information is in it (less information=narrow, more information=wide).

With them, you can specify not only whole table widths (in pixels or percentages), but also column widths within tables.

Before code: Table without WIDTH attributes:

   <table border=1>
     <tr>
        <td>Column 1</td>
        <td>Column 2</td>
     </tr>
   </table>

Before results:

After code: Table with WIDTH attributes:

   <table border=1 width="100%">
     <tr>
        <td width="20%">Column 1</td>
        <td width="80%">Column 2</td>
     </tr>
   </table>

After results:

Note 1: WIDTH can also be specified in pixels - just leave off the % sign. Percentage values are more flexible, though, so try to use them first.

Note 2: HEIGHT can also be used an attribute, but it's far less useful, because screen heights are affected by more variables than screen widths.

Note 3: Both attributes are notoriously finicky and may not "take" in different circumstances. Be sure you

• test on lots of browsers
• have stuff in your cells. Browsers handle empty cells oddly. Sometimes this doesn't get better until you add enough elements to fill the specified width
• follow the syntax exactly - no spaces on either side of the equals mark, and add quotes on both sides of the percentage value. Browsers also handle off-syntax in different ways, so these errors will show up in different ways in different browsers.

Note 4: Transparent .gifs can be helpful if your coding just isn't working. Save this one >><< by right-clicking on it. Put it in cells to keep them from collapsing. Its normal attributes are 1x10, but you can adjust them to any size.