Basic ways to use tables

There are three basic ways that tables are used in web documents:

• to display data in columns and rows
• to create a layout for the page
• to constrain the width of the display on the page

When the World Wide Web Consortium first created the tags for tables, they intended tables to be used for data. This could be something as simple as a list of names, with emails and phone numbers, or research data. However, website creators quickly started to use this feature to do page layout and provide visual relief. For example, as discussed in the lesson on graphics, the coding to align text and graphics is very limited, and so people began to use tables to have text and associated images "lining up" in a more appeasing manner. Over the last few years, as the quality of monitors started changing and monitors became wider and wider, site creators began to realize the importance of putting a width constraint on a page, particularly if the page had text. Some monitors are so wide now that it is difficult visually to read long lines of text on a monitor that is 1000 or more pixels wide, unless the text area is constrained somehow.

Just how you decide to use tables (or even IF you decide to use them) is a matter ultimately for you to decide. Current trends are away from using tables for layout and instead to use style sheet rules, but if you have inherited a site that is several years old, you may find that it is using tables for layout.

How can you tell if a table is being used on a site? If you can see a column and row structure, with color on parts of the page (which is not an image), or if you see text and associated images lining up well, you can pretty well assume that tables are being used. If you have Netscape on a Windows machine, you can go to that website, and click on File on the Netscape menu bar, then Edit Page and a copy of the page is put into Netscape Composer on your machine. In Internet Explorer, you may not have an editor defined on your machine, but the parallel choices are Edit then Page. Even though you may not have seen the table "layout", when you pretend to edit the page using your Netscape program or I.E. program, you will see how tables have been used on the page. (Note: a Mac friend indicated she did not have these options on her machine.)

But sometimes the best way is to look at the code, for example selecting View, Source in Internet Explorer browser, and see the <table> codes.

The headache of dealing with different monitor resolutions

In Tip #21, I give some examples of how a page could look differently on different monitor resolutions.

You need to start thinking about monitor resolution differences, primarily because table widths and cells in tables are expressed in terms of percentage of the monitor's display width or in terms of pixels. If everyone had the same monitor size, life would be so much easier for the site designer. You could design the page and if it looks good on your monitor, you know it would look good on everyone else's monitor. But the reality is there are a large number of monitor resolutions available. For example, these are options for one particular Gateway monitor:

• 640 pixels wide by 480 pixels high
• 800 pixels wide by 600 pixels high
• 1024 pixels wide by 864 pixels high
• 1280 pixels wide by 1024 pixels high
• 1600 pixels wide by 1200 pixels high

Monitors will not be the same, and you cannot know what your audience will have. The monitor resolution affects affects how much of the page can be seen at a given time. If you design your page for YOUR monitor's resolution, and you have a newer monitor with a higher resolution, then your web page may appear quite differently to someone with an older computer with only a 640 x 480 monitor, or even a monitor of 800 x 600 pixels. Issues to consider dealing with monitor resolution are discussed in Tip #21.

Displaying a ruler

Dreamweaver allows you to display a ruler on your Document window. Especially if you start using tables in your documents, you will probably find it useful to have the ruler display. It just is a reminder of how much space is available horizontally on the page and vertically on the page you are creating.

To turn on the ruler, in the Document window, click on View, then Rulers and select Show to turn on the display; reselect Show later to turn off the display. You can pick as measurements pixels, inches, or centimeters. I would encourage you to stay with pixels, since that is a more consistent measurement used on web pages (for example, image sizes are done normally as pixels).

Table coding

One of the advantages of using a program like Dreamweaver is that you can create "effects" like tables in your web document without having to deal directly with the underlying HTML coding. But you still need a little explanation of how tables are put together. The table area of a web document begins with a tag of <table>. The table itself is made up of columns and rows (even if it is one column and one row). The intersection of a column and row is a cell. This is similar to table structure in word processing programs. A row begins with a tag of <tr>, and an individual cell begins with a tag of <td>.

As you make tables in Dreamweaver, the program creates all the necessary HTML coding. You will see the codes, on the status bar, if your cursor is inside a table area. The table coding displays in the tag selector area on the left side of the status bar in the Document window.

Creating a table

As you start to create tables, you need to decide how you are going to express the table and the cell widths. This is one of the reasons I raised the issue of monitor resolution earlier in this lesson. You can express table widths as either a percentage of the screen's width or as a fixed number of pixels. If you use pixels, then the table looks the same no matter what the monitor resolution for the user. If you pick percentage of the screen's width, then the table layout can change, based on the user's monitor resolution. There really is no rule about which is better, but I would say that many webmasters--at present--use a pixel measurement for the table's width and then use either a percentage for the column width or a pixel for the column width. One of the advantages of using a program like Dreamweaver to create tables is the program keeps track of measurements for you, after you give it the initial table width you want to use.

There are a couple of ways to create a table. You can select the Insert Table button on the Common insert bar, shown below. You can also click on Insert on the menu bar, and pick Table. Either way brings up the table dialog box.

The table dialog box (shown to the left) gives initial settings for the table. All of these settings can be changed later in the Properties panel. If you have never created a table in your copy of Dreamweaver, then default values appear. If you have created a table already, then the "last table's settings" are shown.

These are the options found in the Insert Table dialog box:

• Rows and columns are pretty straightforward.
• There are two choices for width--either width as a percentage (of the user's monitor) or as pixels.
• The border is for a table border and will be the width in pixels of the border around each cell and the entire table. Whether or not you use a border depends on how the table is being used. You may decide to use a border with data, but if your table is for page layout, you normally will pick a border of 0. Dreamweaver defaults to a border of 1 if you have not created a table using another setting.
• Cell padding is the space between a cell's border and its contents. If you leave this blank, Dreamweaver uses a pixel of 1 for cell padding, so enter 0 if you want no cell padding. If you have created a table previously, values used in that table are used. Cell padding is within the cell.
• Cell spacing is the number of pixels between each cell, excluding the border. If you leave this blank, Dreamweaver uses a value of 1 pixel, so enter 0 if you want no cell spacing.

You click on OK to close the dialog box and you will see the table where your cursor was located.

The video Basic Table Formatting in Dreamweaver demonstrates using various cell padding and spacing and the effects on a table's appearance.

You can enter text and/or place images in the cells of the table. You can also insert another table inside a cell.

Using percentage versus pixels for tables

Probably most of you will use tables to do page layouts, both for the initial front page and other pages on your site. With tables you can use either a percentage for the width of the table or a fixed pixel width. The advantage of using percentage for a table's width is the page (unless it has very wide graphics) will not chop off in the display. Content (text) will wrap around within the user's monitor. This is only for text, not for graphics. That is, if the top of a page consists of a wide graphic going margin to margin, then the width of the graphic is really "defining" the width of the page.

If you use percentage, the appearance of the page can shift depending on the user's monitor (and its resolution width), particularly if the user has a lower resolution from yours and the design you have created pretty well fills the screen on your computer.

If you use a fixed pixel width for the table, the design will not be changed as the monitor resolution changes; however, your users may have to scroll horizontally and vertically to see pages if they have a lower resolution monitor from yours. And the right most information in the display may be chopped off when the page is printed.

Think about the measurements you use

Again, whether or not you express your table width at a percentage or as pixels depends on your application and your own preferences. However, think about what measurements you use. For example, I can tell Dreamweaver I want a table width of 500 pixels, and then through the menu choices, I can tell it I want one column of 200 pixels, and three columns of 150 pixels each. The total of these columns excedes the table width, but Dreamweaver will NOT stop me from entering my own measurements. The same thing is true with percentage. I have seen people create tables which have column widths which exceed 100%, although this seems harder to do with the 2004 release because of the display of the table measurements (talked about below). This could be done with older releases, so if you inherit documents created by others, you need to check out the table structure for possible inconsistencies.

Obviously if you enter conflicting information, the browser will try to deal with the page, but the display is apt to appear quite differently between different browsers and monitors.

Check your pixel width totals and percentage totals, especially if you start entering your own measurements for widths of cells in the layout.

New options for working with tables

There are two sections in the table dialog box which are new in the 2004 release. One is the header and one is accessibility. The header section provides an easy way to add header coding to the cells on the left of the table, cells in the top row, or for both cells in the left column and in the top row. This changes the coding used for those cells to <th>and the text will appear boldfaced and centered in the cell even though no boldface coding or alignment coding is in those cells.

The accessibility section is there is there to provide codes needed to make the table more understandable to users with screen readers. The caption is a feature you might find useful and it will display in with the table. This caption information can be seen. The summary section is there to meet accessibility requirements to provide a summary of the information in the table. This summary will not display to people seeing the table; it is there for use by screen readers. It is perhaps a good habit to get into to put a summary with tables with information, because future browsers may provide this information to all users.

If you look at the table coding, the HTML coding at the top of the table where you have used a summary, you can see the text typed in there, as is shown in the above screen capture.

Another feature new in the 2004 release is the display of the measurements for a table either at the bottom of the table or at the top of the table. If you create a table and don't see these measurements showing, you have to turn on the table widths display as shown below.

Selecting parts of the table

There are properties of the table and properties of the parts of the table. If you want to change table properties or cell properties, you have to select the element you want to change. If you have a table (even if it is empty) and your cursor is inside the table, you will see table elements on the tag selector part of the status bar. You can click on one of these tag selectors to select that part of the table. In this screen capture, my cursor was sitting in the third row, right column.

You can also use the mouse to drag over cells to select one or more cells. Or if your cursor is inside the table area, you can select Modify from the menu bar, then Table and then pick Select table. You will see a selection border placed around the table.

The Properties panel for the entire table

There are different Properties panel when you are working inside a table area. If you select the entire table, then the entire table area has a dark line around it. In the screen capture below, notice that the Properties panel is indicating Table ID which tells you these are properties for the entire table.

The Properties panel for the entire table has elements already seen in the Insert Table dialog box: rows; columns, width of table, cell padding, cell spacing, and border. Any changes made in the Properties panel for the table would, of course, affect the selected table.

There is also an alignment option, with choices of Default (table aligns to the browser's default, usually left, and no text wrapping occurs; Left (aligns the table to the left side of the browser's window and wraps text around the right side if there is text next to the table area); Center (aligns to the center of the browser's window and text does not wrap to either side; this alignment option only works for 4.0 or higher browsers); and Right (aligns table to the right side of the browser's window and wraps text around the left side if there is text next to the table area).

You can apply a color behind the entire table. Just like when using colors elsewhere, you can pick colors from the Color Swatch or the full system color palette or use the eyedropper to pick a color from another part of the page.

If your border is not 0, you can apply colors to the regular table border, with a window labeled Brdr Color.

There is also an option for referencing an image to be used behind the table. Use this feature cautiously and only with selected images.

The Properties panel for areas within a table

If your cursor is sitting inside a table area, and the Properties panel is displaying, you will see a different set of options. Notice in the screen capture below the reference to Cell. If you had selected a row or a column, that "area" would be named in the Properties panel.

The Properties panel for parts of a table has a similar section, for giving a background color to the selected part of the table (like a single cell, a column, or a row) and a color for the border of the cell. These colors would override the colors for the table as a whole.

There are windows in the Properties panel for giving the width (and height) of a cell or selected column or row. You cannot change the height or width of a single cell without affecting the column or row that cell is sitting in. Although there are some situations when you would want to use a particular height for a cell, be careful of using height when not necessary, or you could end up with a height you really do not need. Besides using the Properties panel to change the height and width of cells, you can also use your mouse by clicking and dragging on a cell's border.

An extremely important set of options in the Properties panel for a part of the table is for the alignment of content in the cell. Defaults for the horizontal alignment (if the setting is left as default) is to the left inside the cell. Default for the vertical alignment (if the setting is left as default) is centered. As the content of cells in a table varies, you start noticing particularly the centered vertical alignment, and you may want to change the alignment. This is shown in the video Basic Table Formatting in Dreamweaver.

The last item in this Properties panel I will address is the option for joining cells or splitting cells. These are two adjacent buttons, indicated below. To join cells, highlight the cells you want to join and then click on the merge selected cells button. To split cells, put your cursor inside the cell, and click on the split cell into rows or columns button. You need to experiment with this feature, and if you do something you do not like, use the Edit, Undo option in Dreamweaver. Particularly the option of joining cells is used both in "data tables" and especially when using tables for page layouts.

Inserting and deleting columns and rows

Just as you can with any word processor, you have the ability to insert columns and rows in particular locations, based on your location of the cursor. You can also delete columns and rows. Your cursor needs to be inside the table, on a row or column you want to delete, and then use Modify Table and various options appear. If you select the option of Insert Rows or Columns, a dialog box appears allowing you to add multiple rows or columns where your cursor is located.

Data tables

The table feature can be used for textual displays and data tables. A nice feature available in Dreamweaver is the ability to sort information in a table. You need to be sitting inside the table area, and then click on Commands, then Sort Table.

This display appears. You have options to exclude the first row, which might be headers, and to pick the columns you want to sort by. This is a nice feature, if you have informational tables. You can create your tables and "alphabetize" afterwards.

This seems like a good place to comment about one of the significant differences between doing tables on the web and tables in your word processor. People can squeeze on a printed document a whole lot of text and numbers, inside a table, by using a very small font or by printing the page landscape, so that the table can be wider. We have already discussed the limited number of font sizes available for a web page. Furthermore, there is not an option for "landscape printing" when viewing a web document.

If you have a wide table with lots of text or numbers, the user is apt to have to use the horizontal scroll bar to see from side to side on the web document. You also need to test out how your page prints if it is wide, if your audience chooses to print your web page. Displays can look great on the screen, and then look quite bad when printed. Even if you do not not plan for your audience to print your tables (of data or text), it could still be very hard for people to read and understand your data if they have to use the horizontal scroll bar to see a row of information.

The point of this is to keep in mind that a web page is not the same as a printed document page, and don't try to cram onto a web page what you could easily do on a printed page.

Limitations of tables for layouts

Now that you know a little more about tables and how they can be used, you will start noticing how many pages use tables for layout. Again, depending on the pages you plan to create, you may well start using tables on all or a majority of your pages. (I personally use tables on every page I create.)

If you have existing text already, you can insert a table into that document, but you will have to then copy and cut text or images into cells. There no way to place a table literally on top of an existing web document, and have the information pop into the correct place.

The World Wide Web Consortium, who sets the guidelines for HTML coding and standards for web pages, began several years ago officially discouraging the use of tables for layout. However, since, as of yet, there is no other good mechanism for laying out pages which work across multiple browser releases, most site managers are still using tables for layout. This is particularly true for site managers whose audiences can have older versions of some of the browsers.

If you decide to use tables for layout, however, make sure that the chunks of information in a cell is a logical group of information.

The video Tables for Layouts in Dreamweaverillustrates some of the advantages of using tables for page layout. Text and various graphics can be used side by side on different parts of the page, using a table of rows and columns. The video Layout Ideas for Web Pages for CALS Persons shows some other layouts--all of these use tables for the layout of the page except the one that starts as a single graphic (layout six). Even if you are not in the College of Agriculture, these pages illustrate ways to create an initial homepage. These are just a few examples of ways tables can be used to create an initial web page.

Tables to constrain the page width

I mentioned previously that you can use tables to limit the width of a page display. This is primarily done for two reasons: users with different types of monitor resolutions see somewhat the same layout on the page, if not the same layout; and having long lines of text to read on a page, because of wide monitors, is hard to read.

In the old days, this was not an issue. Monitors were more or less the same size. Not so anymore. There is no consensus among webmasters about what monitor resolution to plan for or if pages should be "constrained". But if you explore the web, you will find many sites restricting the width on a page by use of tables.

Constraining occurs by placing the entire web page within one large cell, or the layout is limited to a width of 590 for display, or perhaps 720 (assuming a resolution of 800 pixels), or some other measurement. Some site managers constrain using a percentage option (percentage of the screen), but as mentioned, if graphics dominate the page, particularly a wide graphic navigation area or header, the width of the graphic(s) will override the percentage setting, if necessary. Since you can put a table inside a table, various site managers constrain their pages to a particular width. If you look at some of the examples in the exercise section, you will see how often web pages are constrained.

This document is part of a series of lessons on Dreamweaver Basics for the 2004 release, given by Linda Ffolliott, College of Agriculture and Life Sciences at the University of Arizona.