Table Cells 3 - Width and Height

<td width="pixels or percentage" height="pixels or percentage"> ...</td>

Sets width of the table data cell Sets height of the table data cell

Web browsers will automatically set the dimensions of the rows and columns in your web page table according to how much content your table cells contain. Since cells are displayed in a grid-like pattern then the cell containing the most content will typically set the width and height of all cells adjacent to it and hence establish the width and height of related rows and columns in your table.

You can, however, apply the width and height attributes to your <td> tags to explicitly set the dimensions of your table cells and thus exercise control over the width and height of rows and columns.

These attributes are described in more detail below:

• width="pixels or percentage" ~ Using the width attribute in your <td> tags, you can explicitly set the width of your table data cells. This will have the effect of setting not only the width of that particular cell but will also set the width of the entire column in which that cell resides. You may define either a fixed width in pixels or a relative width (recommended) which is equal to a percentage of the table width.
  
  NOTE: In the case where the width attribute is set in more than one cell in the same column, the largest width is the one that is applied. Likewise, if the content in any table cell in that column (such as a graphic) outsizes a specified width, the width of the content will establish the width of the cell and the column it resides in.
  
  Example 1 below renders a table that is 500 pixels wide and has two columns. The width of the first table data cell is set to 25% which then sets the width of all the cells in Column 1 at 25% or 125 pixels (25% of 500 = 125). The width of all the cells in Column 2 default to the remainder of table's width (75%):
  
  
  Example 1 - SOURCE CODE
  
  <table width="500" border="5">
   <tr><td width="25%">Column 1</td><td>Column 2</td></tr>
   <tr><td>Column 1</td><td>Column 2</td></tr>
   <tr><td>Column 1</td><td>Column 2</td></tr>
</table>
  
  
  
  
  Example 1 - RESULT

  Column 1	Column 2
  Column 1	Column 2
  Column 1	Column 2

  
  
  
• height="pixels or percentage" ~ Using the height attribute in your <td> tags, you can explicitly set the height of your table data cells. This will have the effect of setting not only the height of that particular cell but will also set the height of the entire row in which that cell resides. You may define either a fixed height in pixels (recommended) or a relative height which is equal to a percentage of the table's height.
  
  NOTE: In the case where the height attribute is set in more than one cell in the same row, the largest height is the one that is applied. Likewise, if the content in any table cell in that row (such as a graphic) outsizes a specified height, the height of the content will establish the height of the cell and the row it resides in.
  
  Example 2 renders a table that is 500 pixels wide and has two rows. The height of the first table cell in Row 1 is set to 100 pixels which then sets the height of all cells in Row 1 to 100 pixels. The height of Row 2 is not affected by the height specification in Row 1.
  
  
  Example 2 - SOURCE CODE
  
  <table width="500" border="5">
  

  <tr><td height="100">Row 1</td><td>Row 1</td><td>Row 1</td></tr>
<tr><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr>

  </table>
  
  
  
  
  Example 2 - RESULT

  Row 1	Row 1	Row 1
  Row 2	Row 2	Row 2

  
  
  

Well that's it for tables. The next section of Iron Spider will deal with all the ins and outs on how to make lists...

<~BACK

TOP

NEXT ~>