Publish and Be... Minipic.gif (3518 bytes)
pcpmini.gif (2265 bytes) ...Tabular!

 

 

Setting overall widths
Setting column widths
Setting table heights

Setting table sizes


Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. You can set widths and heights for the whole table, and for individual cells.

ns.gif (1269 bytes)ie.gif (1254 bytes) A table with no size attributes is sized automatically by the browser, like this:

Hello World Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. PC Plus
Newlogo.gif (8646 bytes) Publish and Be... Strange table widths...

The browser has made the table occupy the full screen width, and has allocated space to columns and rows according to what they contain. The middle column is wide because its top cell contains a lengthy text paragraph - the browser has word-wrapped the paragraph, but given it as much width as possible. The width of the first column is determined by the width of the image in its second row, although if the text in its first row was longer, that would make the column wider too.

Note also that the text in the second and third cells of the second row appears half way down the cells - that's because the browser tries to centre everything in a row vertically. You can use the VALIGN=TOP attribute to force text to the top of cells - click here to se htis action.

Try resizing your browser window to see how the browser adjusts column widths.

ns.gif (1269 bytes)ie.gif (1254 bytes) Setting an overall width for a table.

You can control a table's overal width by placing a WIDTH= attribute in its <TABLE> tag. You can specify width in pixels (to produce a fixed-width table) or as a percentage of the browser windows size - in which case the table will change size if you resize the browser window.

Fixed-width tables.

Here's the same table with a fixed overall width of 500 pixels:

Hello World Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. PC Plus
Newlogo.gif (8646 bytes) Publish and Be... Strange table widths...

The HTML for this is:

<table border="1" width="500px">

Try resizing your browser window. The table doesn't change shape, even when the window becomes narrower than the table - instead the browser will provide a horizontal scroll bar to allow you to scroll across it (this is very useful for producing 'protected' layouts which won't be reflowed - click here for another example).

Because I still haven't specified widths for any individual cells, the browser still allocates space according to each cell's content. The long text paragraph still gets the biggest allocation, but is word-wrapped more often, so the cell becomes deeper.

ns.gif (1269 bytes)ie.gif (1254 bytes) Percentage-width tables.

Alternatively, you can make the table a percentageof the current browser window width, like this:

Hello World Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. PC Plus
Newlogo.gif (8646 bytes) Publish and Be... Strange table widths...

This table is set to 60% of the browser window width. Here's the HTML:

<table border="1" width="60%">

Try resizing your browser window - as it gets narrower, the table shrinks to remain at 60% of the current window width, until it reaches a minimum practical size.

ns.gif (1269 bytes)ie.gif (1254 bytes) Setting cell (column) widths within a table.

To control the detailed layout of a table, you can set individual cell widths by placing WIDTH= attributes on its <TD> (Table Data) tags. As with <TABLE> tag widths, you can specify pixels or percentages. You can also use <TD>-based widths on a table whose overall size has been specified via its <TABLE> tag.

Here's a table which has been forced into a regular horizontal layout:

Hello World Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. PC Plus
Newlogo.gif (8646 bytes) Publish and Be... Strange table widths...

Here's the HTML for this table:

<table border="1" width="500px">
  <tr>
     <td width="33%">Hello World </td>
     <td width="34%">Left alone, tables will... </td>
     <td width="33%">PC Plus</td>
  </tr>
  <tr>
     <td><img src="Newlogo.gif"....</td>
     <td><strong>Publish and Be...</strong></td>
     <td>Strange table widths...</td>
  </tr>
</table>

The table has been given an overall width of 500 pixels. The three cells in the first row each have a width="33%" attribute (34% for the middle cell), giving them roughly equal proportions of the 500-pixel overall space. You only have to specify widths for the cells in the first row, as the other rows are automatically sizd to match them.

ie.gif (1254 bytes) Setting widths for some cells, leaving others to be automatically sized.

This table has an overall width of 80% of the browser window. Its left-hand column is set to 170 pixels, and its middle column to 250 pixels.The right-hand column is left to pick up whatever is left. Try resizing your browser (in IE). The right-hand clumn will get narrower as you reduce the window width, until it reaches a minimum paractical size. When that happens, the browser starts narrowing the first two columns as well.

      ns.gif (1269 bytes) Navigator gives less predictable results than IE when handling this kind of table layout.

Hello World Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. PC Plus
Newlogo.gif (8646 bytes) Publish and Be... Strange table widths...

Here's the HTML for this table:

<table border="1" width="80%">
<tr>
<td width="170px">Hello World </td>
<td width="250px">Left alone... </td>
<td>PC Plus</td>
</tr>
<tr>
<td><img src="Newlogo.gif" ...</td>
<td><strong>Publish and Be...</strong></td>
<td>Strange table widths...</td>
</tr>
</table>

Setting vertical sizes.

Like widths, you can set heights (vertical sizes) for a whole table, and for individual cells, using height= attributes on <TABLE> and <TD> tags. Setting a height for a cell controls the height of the row to which it belongs. Here are some examples:

ns.gif (1269 bytes)ie.gif (1254 bytes) A table with an overall height. This table's overall height is set to 400 pixels. The row heights are set automatically by the browser.

Hello World Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. PC Plus
Newlogo.gif (8646 bytes) Publish and Be... Strange table widths...

Here's the HTML:

<table border="1" width="80%" height="400px">

ns.gif (1269 bytes)ie.gif (1254 bytes) Setting the height of an individual horizontal row. Setting the height of the first cell in a row controls the height of the first row. The top-left cell of this table has its height set to 250 pixels. You can also use cell-based heights in conjunction with overall table heights, as with widths.

Hello World Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. PC Plus
Newlogo.gif (8646 bytes) Publish and Be... Strange table widths...

Here's the HTML for this table:

<table border="1" width="80%">
  <tr>
     <td width="170px" height="250px">Hello World </td>
     <td width="250px">Left alone... </td>
     <td>PC Plus</td>
  </tr>
  <tr>
     <td><img src="Newlogo.gif"...</td>
     <td><strong>Publish and Be...</strong></td>
     <td>Strange table widths...</td>
  </tr>
</table>

ns.gif (1269 bytes)ie.gif (1254 bytes) Finally, how to make content start at the top of each cell. When the cells in a row contain different amounts of content, the browser attempts to centre them all vertically. This results in shorter text, smaller images etc appearing mid-way down their cells. A quick way to make everything start from the top of the cell is to use a VALIGN="top" attribute on the <TR> tag which introduces the row (one of the few attributes you'll find on a <TR> tag).

Here's an example:

Hello World Left alone, tables will be automatically sized by the browser. This can give odd results though, and you'll probably prefer to specify your own sizes by including size (WIDTH= and HEIGHT=) attributes in the table-defining tags. PC Plus
Newlogo.gif (8646 bytes) Publish and Be... Strange table widths...

.. and here's the HTML:

<table border="1" width="80%" height="400px">
  <tr valign="top">
     <td width="170px">Hello World </td>
     <td width="250px">Left alone...</td>
     <td>PC Plus</td>
  </tr>
  <tr valign="top">
     <td><img src="Newlogo.gif... </td>
     <td><strong>Publish and Be...</strong></td>
     <td>Strange table widths...</td>
  </tr>
</table>

Note that you have to put the valign="top" attribute into each <tr> tag.


Back to menu