(Legacy) HTML: Tables: Widths and Heights

Last Updated

IMG_2406.JPG 3.13 MB
This article is based on legacy software.
NOTE: The HTML pages are out-of-date and will not be updated.
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


<div id=col1>Red </div>

 
Red | Green | Blue
Orange | Yellow | Purple
 | <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

Red | Green | Blue
Orange | Yellow | Purple | <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

Red | Green | Blue
Orange | Yellow | Purple | <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

Red | Green | Blue
Orange | Yellow | Purple | <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%

Red | Green | Blue
Orange | Yellow | Purple | <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

Red | Green | Blue
Orange | Yellow | Purple | <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>