HTML Coding
Tables: Widths and Heights
NOTE: These pages will remain available for your reference, but will not actively be maintained due to UW-Eau Claire's adoption of FrontPage for web publishing.
It is possible to manipulate the width and height of tables and individual cells by assigning a fixed size in pixels or a variable size determined by a proportion of the window. (Tables will vary from browser to browser if you use the proportion option.) To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell. Notice that adjusting the size of one cell in a row or column affects all the corresponding cells.
A Table With a Width 50% of the Width of the Window
|
<TABLE BORDER=1 WIDTH="50%"> <TR> <TD>Red</TD> <TD>Green</TD> <TD>Blue</TD> </TR> <TR> <TD>Orange</TD> <TD>Yellow</TD> <TD>Purple</TD> </TR> </TABLE>
|
A Table With a Fixed Width of 200 Pixels
|
<TABLE BORDER=1 WIDTH=200> <TR> <TD>Red</TD> <TD>Green</TD> <TD>Blue</TD> </TR> <TR> <TD>Orange</TD> <TD>Yellow</TD> <TD>Purple</TD> </TR> </TABLE> |
A Table Containing a Cell With a Fixed Width of 200 Pixels
|
<TABLE BORDER=1> <TR> <TD>Red</TD> <TD WIDTH=200>Green</TD> <TD>Blue</TD> </TR> <TR> <TD>Orange</TD> <TD>Yellow</TD> <TD>Purple</TD> </TR> </TABLE> |
A Table With a Fixed Height of 200 Pixels
|
<TABLE BORDER=1 HEIGHT=200> <TR> <TD>Red</TD> <TD>Green</TD> <TD>Blue</TD> </TR> <TR> <TD>Orange</TD> <TD>Yellow</TD> <TD>Purple</TD> </TR> </TABLE> |
A Table With a Proportional Height of 40%
|
<TABLE BORDER=1 HEIGHT="40%"> <TR> <TD>Red</TD> <TD>Green</TD> <TD>Blue</TD> </TR> <TR> <TD>Orange</TD> <TD>Yellow</TD> <TD>Purple</TD> </TR> </TABLE> |
A Table Containing a Cell With a Fixed Height of 100 Pixels
|
<TABLE BORDER=1> <TR> <TD>Red</TD> <TD HEIGHT=100>Green</TD> <TD>Blue</TD> </TR> <TR> <TD>Orange</TD> <TD>Yellow</TD> <TD>Purple</TD> </TR> </TABLE> |
