Creating Tables in HTML

Contents Audience Objectives About this Document

What are Tables, and What are they Used For? Tables and Their Parts Creating Tables using HTML Beautifying Tables Background Colors Background Images Alignment Border Thickness Cell Padding and Spacing Table Sizing Irregular Tables: Spanning Rows and Columns Nesting Tables Other Goodies

A table is a rectangular area that is (usually) subdivided into further rectangles to make rows and columns.

Tables are used whenever information needs to be set out clearly in rows and columns.

• Spreadsheets are arranged as tables
• Database information is often shown in tables
• Statistical summaries are usually shown in tables
• Calendars are a kind of table

On the Web, tables are used for all of these purposes. In addition, they're often used to overcome some of HTML's limitations. On the Web, they are used for

• Page layout - that is, making sure text and pictures are arranged in a clear and attractive way.

Let's look at some of the vocabulary of tables...

Like everything else in HTML, tables are controlled by tags. Many of the tags have attributes, but here are the basics:

There is no basic HTML tag for setting up columns. Tables are created by defining the table, the first row, and each cell within the first row. After the first row, more rows can be created as they are needed. Let's walk through it here:

OK, let's create the table and see how it looks...

Create a table for yourself following the directions in module W24h Step 1.

Pretty plain, isn't it? Let's see what we can do to pretty it up...

Background color can be set for the table as a whole, for a row, or for an individual cell, using either CSS or HTML attributes. The HTML attribute is bgcolor; with CSS, you can either create styles for each table component in a separate stylesheet, or use the style=(background-color...) attribute in the tags. We'll illustrate the HTML attributes here. Here's a table illustrating HTML background color attributes in each of the table's elements:

HTML Code	Browser View
<table bgcolor="#FF0000"> <tr>   <td>Row 1 Column 1</td>   <td>Row 1 Column 2</td>   <td>Row 1 Column 3</td> </tr> <tr bgcolor="#FFFFFF">   <td>Row 2 Column 1</td>   <td>Row 2 Column 2</td>   <td>Row 2 Column 3</td> </tr> <tr>   <td bgcolor="#CCCCFF">Row 3 Column 1</td>   <td bgcolor="#FFFFCC">Row 3 Column 2</td>   <td bgcolor="#CCFFCC">Row 3 Column 3</td> </tr> </table>	Row 1 Column 1 Row 1 Column 2 Row 1 Column 3 Row 2 Column 1 Row 2 Column 2 Row 2 Column 3 Row 3 Column 1 Row 3 Column 2 Row 3 Column 3

In addition to colors, you can put images in the background of your tables using the HTML background attribute or CSS background-image property with the name of an image file. Again, you can do this for the whole table, for individual rows, and individual cells. Here's the same table with pictures instead of colors as the background:

HTML Code

Browser View

<table background="purp_nb2.gif">   <tr>     <td>Row 1 Column 1</td>     <td>Row 1 Column 2</td>     <td>Row 1 Column 3</td>   </tr>   <tr background="rainpale.jpg">     <td>Row 2 Column 1</td>     <td>Row 2 Column 2</td>     <td>Row 2 Column 3</td>   </tr>   <tr>     <td background="purp_nob.gif"> Row 3 Column 1</td>     <td background="bludkswl.jpg"> Row 3 Column 2</td>     <td background="pnkbkg.gif"> Row 3 Column 3</td>   </tr> </table>

Row 1 Column 1 Row 1 Column 2 Row 1 Column 3 Row 2 Column 1 Row 2 Column 2 Row 2 Column 3 Row 3 Column 1 Row 3 Column 2 Row 3 Column 3

You can align tables as a whole, and the contents of each cell. Within the cell, you can align both vertically and horizontally. Click here to see an example that shows all the HTML table alignment attributes.

So far, we've left the borders of the tables at their default thickness, which is zero pixels: invisible. Border thickness can be used to emphasize a table and draw attention to its contents. Examples:

HTML Code	Browser View
<table>   <tr>     <td>A Borderless Table: useful for page layout</td>   </tr> </table>	A Borderless Table: useful for page layout
<table border="1">   <tr>     <td>A 1-pixel border: Sets the table off from the rest of the page, but doesn't draw much attention to itself.</td>   </tr> </table>	A 1-pixel border: Sets the table off from the rest of the page, but doesn't draw much attention to itself.
<table border="5">   <tr>     <td>A 5-pixel border makes the table look like a button (but is much faster to load than an image).</td>   </tr> </table>	A 5-pixel border makes the table look like a button (but is much faster to load than an image).
<table border="10">   <tr>     <td>A 10-pixel border really draws attention to the table. Useful for titles, buttons, and very important notices.</td>   </tr> </table>	A 10-pixel border really draws attention to the table. Useful for titles, buttons, and very important notices.

I think borders much wider than 10 pixels look a bit awkward and take up more space than they're worth - but that's really a matter of creative and artistic judgment!

In addition to the border, you can control:

• the space between cells: cell spacing (default is 1 pixel)
• the space between the edge of the cell and its contents: cell padding (default is 1 pixel)

The difference between spacing and padding is easy to remember if you think of cells as being like boxes stacked in a warehouse.

Spacing is the distance between the outside edges of the shipping boxes; cellspacing is the distance between the outside edges of the cells in a table.

Padding is the styrofoam or bubble-pack inside each carton to protect the contents; cellpadding is the space between the inner edges of the cells and the text or image inside them.

To illustrate this in HTML, let's create a table and vary these attributes. We'll set the border to zero pixels, and fill the cells with Ms so we can see more clearly what's happening.

Try your hand at a more interesting-looking table using the instructions in module W24h, Step 2.

HTML gives you control over the size of tables - in theory. There are limits to the amount of control the Web page author has over the browser, because of the underlying goal of HTML: to show pages as well as possible on every possible machine, with every possible browser. That means the browser is given wide discretionary powers of rearranging pages to fit users' windows.

My experience has been that's it's better to let browsers play unless they're really mangling my pages. I've found that "micromanagement" of Web pages tends to backfire. In this, I differ from Elizabeth Castro, author of the text, Visual Quickstart Guide: HTML for the World Wide Web. She points out that browsers are slowed down by having to calculate table sizes. Though she may be right, I don't believe the amount of time is significant on today's most common computers, which are easily 10 times faster than computers common when the Web was first deployed. Certainly, the calculation time is insignificant compared to the time required to download most images - even with a broadband connection.

Here's how browsers calculate table sizes (rough outline only):

Determine the space available for the table	This is often the size of the browser window, but may be less if the table is part of an indented list or block quote, or if it is nested inside another table.
Determine the space needed for each cell	This is determined by the longest word or the widest image in each cell; or by a width attribute in the cell's HTML code.
Find the widest cell in each column	Some versions of Netscape appear to have a problem with this, and rely on the width of the first cell to determine the width of each column.
Calculate the number of pixels needed	This is the sum of the columns, plus the sum of the borders, plus the sum of the cell spacing, plus the sum of the cell padding for each column.
Check to see if the HTML code specifies a width for the table as a whole	If this is wider than the number of pixels needed, add enough pixels to the width of each column to arrive at the requested number. If the width requested by HTML code is narrower than the number of pixels needed, ignore the HTML requested width.
If number of pixels needed is larger than the space available...	...let the table extend beyond the right edge of the window. The user will have to scroll left-to-right in order to see all the table.

As you can see, the browser has to do quite a bit of calculation apart from any size specifications in the HTML. In fact, width attributes are almost treated as an afterthought by the browser, and in many cases are ignored!

Still, let's take a look at how to specify table widths in HTML...You can specify widths either in percentages or in pixels, and you can do it for either the table as a whole or individual cells. For example:

• <table width="75%"> requests that the table as a whole fill ¾ of space available for the table.
• <table width="200"> requests that the table be adjusted to 200 pixels if possible.
• <td width="75%"> requests that the cell (and the column it's in) take up 75% of the table, and that the sum of the other column widths amount to no more than 25% of the table width...if possible.
• <td width="75"> requests that the cell and column be 75 pixels, if possible.

If you decide to specify a cell width, it's best to do it in the first row of the table - it's more likely to be ignored further down.

If you think about these size specifications, you'll realize that there is more possibility for contradictions in HTML than in the Florida election laws. ;-) How these contradictions are resolved depends ultimately on the individual browsers. Any questions you may have are best answered by writing a test page of HTML and trying it in various browsers.

So, my advice on table sizes is:

1. As far as possible, let the browsers do their own thing with your tables.
2. If you must insure a minimum size, use pixel shims in the first row of a table (p.109 of Castro's text).
3. If your tables get too big, eliminate as many of the wide elements as possible (usually pictures or nested tables), and if necessary arrange the information so that wide elements aren't in a table at all.

Use Step 3 of module W24h to practice using table size specifications.

There are a number of topics discussed in Elizabeth Castro's chapter on tables that I haven't touched on here. Some of these are not standard, or not recognized by all browsers; others are seldom needed. I'll list them here for completeness...

• Changing the border color (MSIE only): p.147
• Wrapping text around a table: p.150
• Adding space around a table (Netscape only): p.151
• Dividing tables into column groups (MSIE only): p.160
• Dividing tables into horizontal sections (MSIE only): p.162
• Choosing which borders to display: p.163-4
• Controlling line breaks: p.165

Use instructions from this module and the textbook to complete the exercise in module W24m.

Irregular tables are those that have some cells that extend into another column or another row. This can be helpful in displaying data, but is most useful in page layouts.

The work is done in the cell definitions using the colspan and rowspan attributes. Let's look at some examples to see how they work...

HTML Code	Browser View
<table border="1" bgcolor="#CCCCCC">   <tr>     <td>Normal Cell</td>     <td colspan="2">Cell spanning two columns</td>   </tr>   <tr>     <td>Normal Cell</td>     <td>Normal Cell</td>     <td>Normal Cell</td>   </tr>   <tr>     <td colspan="3">Cell spanning three     columns</td>   </tr> </table>	Normal Cell Cell spanning two columns Normal Cell Normal Cell Normal Cell Cell spanning three columns
<table border="1" bgcolor="#CCCCCC">   <tr>     <td>Normal Cell</td>     <td>Normal Cell</td>     <td rowspan="3">Cell spanning three rows</td>   </tr>   <tr>     <td>Normal Cell</td>     <td rowspan="2">Cell spanning two rows</td>   </tr>   <tr>     <td>Normal Cell</td>   </tr> </table>	Normal Cell Normal Cell Cell spanning three rows Normal Cell Cell spanning two rows Normal Cell
<table border="1" bgcolor="#CCCCCC">   <tr>     <td>Normal Cell</td>     <td>Normal Cell</td>     <td>Normal Cell</td>   </tr>   <tr>     <td rowspan="2"> Cell spanning two rows</td>     <td colspan="2"> Cell spanning two columns</td>   </tr>   <tr>     <td>Normal Cell</td>     <td>Normal Cell</td>   </tr> </table>	Normal Cell Normal Cell Normal Cell Cell spanning two rows Cell spanning two columns Normal Cell Normal Cell

Creating irregular tables directly in HTML almost requires that you draw a plan of the table with paper and pencil

Putting one table inside another is useful, especially when a table is used to create page layout, and another table is used to show information clearly.

As Elizabeth Castro points out, this makes browsers work a bit harder. Though in theory we can put many tables inside one another, it is best to keep the tables nested only two deep. Netscape, for example, starts ignoring some table attributes (such as color) in tables that are nested three-deep. I've never run into problems with tables nested two-deep.

Here's an example:

HTML Code

Browser View

<table width="100%" border="1" bgcolor="#CCCCCC">   <tr>     <td>Outer Cell</td>     <td>Outer Cell</td>     <td>Outer Cell</td>   </tr>   <tr>     <td>Outer Cell</td>     <td>       <table width="75%" border="1" bgcolor="#33FFFF">         <tr>           <td>Inner Cell</td>           <td>Inner Cell</td>         </tr>         <tr>           <td>Inner Cell</td>           <td>Inner Cell</td>         </tr>       </table>     </td>     <td>Outer Cell</td>   </tr>   <tr>     <td>Outer Cell</td>     <td>Outer Cell</td>     <td>Outer Cell</td>   </tr> </table>

Outer Cell Outer Cell Outer Cell Outer Cell Inner Cell Inner Cell Inner Cell Inner Cell Outer Cell Outer Cell Outer Cell Outer Cell

A good way to create nested tables is to code each one separately, and then test to make sure they work as planned. When you're sure each does what it should, use copy-and-paste to insert one table into the other, and test again to verify that they're working.

Audience	This is for people who are familiar with the concepts of HTML (see module W22c "HTML Concepts") and want to know how to create tables.
Objectives	When you have read and studied this document, you will be expected to be able to... Define Table as used in HTML Discuss what HTML tables are used for Identify the parts of an HTML table: row, cell, border Name the tags needed to create an HTML table: <table> <tr> <td> Describe the table Caption tag and discuss its usefulness List parameters used to determine cell size Name parameters for setting cell color and background image List ways of arranging tables relative to the text around it Discuss aligning a cell's contents Explain cell spacing and cell padding List tags used for cell spacing and padding Explain spanning cells across rows and columns Discuss the advantages and disadvantages of nested tables Explain a process for reliably creating nested tables Identify tags associated with tables but not recognized by both major browsers
Module W24c:	This document is part of a modular instruction series in Computer Information Systems. For more information, see the overview or the list of modules in this series, W: World Wide Web. This document has been used in the following classes:
Author:	Laurence J. Krieg
Institution:	Internet Professional Department, Washtenaw Community College
History:	Original: 26 November 2000 Last modification: Monday, 31-Aug-2009 11:48:06 EDT
Copyright:	Copyright © 2001, Laurence J. Krieg. Instructors: You may point to this file in your Web-based materials. Students: you may make a copy for your personal use. All other uses: contact the author, Laurence J. Krieg for permission. Email krieg@wccnet.edu