HTML Basics:
Tables

español
Did you want IE9+, Chrome, Firefox; Notepad?

You can use HTML tables to display data in rows and columns. Tables are also used to line up text and images in some ways that are not possible using the attributes for the tags.

A table is made up of rows of cells. So it takes three basic tags to create a table:

• <table> </table> for the table itself
• <tr> </tr> for each table row
• <td> </td> for each table cell.

The cell tags are nested between the row tags and all rows are nested between the table tags.

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

Resize your browser window and watch how the cells resize in the table above. The code does not set minimum cell widths, so in small windows, the cells can get very squished.

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

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! Read on to see how this works in different situations.

Cell Size:

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

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

Collapsing: A table cell will collapse when there is nothing in the cell.

• To prevent collapse of an empty cell you can include a non-breaking space &nbsp;. The size of the font will set the cell height.
• To set the minimum width and height of a cell precisely, put a 1 x 1 transparent gif in the cell and set its size to the pixel width and height you need. Remember - the cell will expand even larger, if necessary. You cannot stop it!

  Here is an image you can use: It is 32 pixels by 1 pixel. Right click in the box and choose Save Picture as... 

  This is the transparent image used on these pages to keep the text off the side border. The border of the image was added with the BORDER attribute. It's not part of the image. 

Column Width / Row Height:

• A column will be as wide as the widest cell in the column.
  A row will be as tall as the tallest cell in the row.

• If you set the width for one cell,  it helps the browser 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. 

~~  1 Cor. 10:31 ...whatever you do, do it all for the glory of God.  ~~

Last updated: 30 Apr 2012