---

Constructing a Table

The cell TD tags are nested between the opening and closing tags for a row, TR. All rows are nested inside the opening and closing table tags, TABLE.

The code on the left below produces the table on the right.

<table border="1"> <caption style="caption-side:bottom">Example table: Column headers</caption> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> </tr> <tr> <td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td> </tr> <tr> <td>row 3 cell 1</td> <td>row 3 cell 2</td> <td>row 3 cell 3</td> </tr> </table>

<table border="1"> <caption style="caption-side:bottom">Example table: Row headers</caption> <tr><th>header 1</th> <td>row 1 cell 2</td> <td>row 1 cell 3</td> </tr> <tr><th>header 2</th> <td>row 2 cell 2</td> <td>row 2 cell 3</td> </tr> <tr><th>header 3</th> <td>row 3 cell 2</td> <td>row 3 cell 3</td> </tr> </table>

The attribute border="1" turns on the table's border. A value of border="0" turns off the border. The default if this attribute is missing to not show borders. These are not pixel sizes! This method of showing or hiding a border is on its way out but it is still valid in HTML5. CSS lets you control the border more precisely.

The example code does not set width for the table or minimum cell widths. In small windows, the table will resize. Cells without a minimum width can get very squished.

The indentions in the code are not required, but they do help make the code easier to read.

---

Browser Differences

Current versions of our browsers (IE11, Firefox 46, Chrome 51) [June, 2016] all interpret the table code nearly the same but they did not in some earlierversions. Firefox still shows a lighter color outside border. It is not likely that any differences will be important to your page design.

---

Dimensions in Tables

It is difficult to fix a table or its parts to precise sizes. HTML is designed to allow the browser a lot of flexibility in displaying the page. So, this is a "feature" rather than a "problem".

Tables and cells have a strong tendency to collapse or expand to the smallest space required to show what is in them. Frustrating at times! Read on to see how this works in different situations.

Cell Size:

Expanding: A table cell can expand to hold what you put in it - even if you set specific cell dimensions in the code!

• Text: Cell will increase its height to show all of the text, wrapping the text.
• Image: Cell will expand in height and width to display the whole image.

Collapsing: It's complicated!
A table cell will try to collapse to the smallest size needed to show its contents. But all cells in the same row must be the same height and all cells in the same column must be the same width.

When there is nothing in the cell, the cell still needs to be at least large enough for the default cell padding. If there is a non-breaking space in the cell, the cell needs to be large enough for the cell padding plus the space that the default font and font size require, including line height.

In the examples below, the green background shows the space that the cell padding needs. The wheat background shows the space that the font formatting requires.

To prevent collapse of an empty cell:

• Non-breaking space: Include one or more non-breaking spaces,  . The line height for the current font and font size will set the minimum cell height.
• Transparent gif: (A hack = an awkward work-around method) To set the minimum width and height of an empty cell precisely, put a transparent gif in the cell and set its size to the pixel width or height you need. Remember - the cell will expand even larger, if you put enough in it. You cannot stop that!

  Here is a transparent image you can use: It is 32 pixels by 1 pixel but is sized in the source code to show as 32 x 10. The border that you see around the image was added with the BORDER attribute for the IMG tag. It's not part of the image. 

  To download the transparent image: Right click on the rectangle in the paragraph above and choose Save Picture as... or similar command. Save to a folder in your local copy of your web site.

Column Width / Row Height:

• Column cells will all be as wide as the widest cell in the column.
  Row cells will all be as tall as the tallest cell in the row.

• If you set the width for even one cell,  the browser can display the page faster if you set the width for every cell in the same column. Similarly, if you set the height for one cell, set the height for every cell in the same row.  The larger the table, the more likely you can improve page load time by setting the cell dimensions for all cells in the table.

---