About Tables

In creating Web pages and Websites, tables are very useful, not only for data but also for formatting text and aligning images.

A table can be (and often is) used to format an entire Web page. For example, this Web page is composed of a large table that contains one row and two columns. The left column is has a green background and includes the navigation bar. The right column contains the content, including this paragraph.

You can even place tables within a table. The left column of the table that makes up the Web page you are reading now has table within it that was used to create the section headings of the navigation bar. That table has one column and nine rows (one row for each heading plus a blank row in between Each section heading in the navigation bar is a table row.

Sometimes it is not obvious that formatting was done with a table because the Web designer can designate that the table borders are invisible (border thickness is set to zero).

Creating a table

To create a table, click the table icon in the Common Insert toolbar, or choose Insert > Table.

The Table dialog box appears:

When you click OK in the Insert Table dialog box, the table appears on the screen. in this example the table has three rows and two columns, is 300 pixels wide, and has a border thickness of one pixel:

Adding Content to Tables

Add text or images to the table in much the same way you add content to a Web page. Type directly in a table cell, insert images into the cell, or select content and drag it into the cell.

Working with Tables

Modifying Table Format

To modify the format of the table, select the table or the part of the table you want to change. You can tell the table is selected when handles (small black squares) appear on the sides of the table (as shown above).

To select a table or part of a table, click inside the table and then do any of the following:

Click on the table width indicator arrow at the top of the table to see a dropdown menu:
Click the downarrow at the top of a column to see a dropdown menu:
In the tag selector area at the bottom of the document window, click <table> to select the table, <tr> to select the table row, or <td> to select the cell:

Changing Table Properties

You can modify the selected table or part of a table by changing the information in the properties panel for the table, or by choosing Modify > Table.

The following is the properties panel as it appeared when the above table was selected:

Perhaps the best way to understand table properties is to experiment. Try creating a table and changing the values and colors in the properties panel to see how it affects the appearance of the table.

Creating a Table Color Scheme

Another option for tables is to choose a table color scheme. To do this, choose Commands > Format Table.

table color scheme

Splitting and Merging Table Cells

In some situations, you may want to either split a cell into two cells, or merge multiple cells into one. To do this, select the cell or cells, then click on one of the following icons in the properties panel:

Pixels vs. Percentages

The sizes of your rows, columns, and table can be defined either in

percent (in which the size varies depending on the size of the user's browser window), or

pixels, which allow you to specify exact values.

In some cases, you may want to set a standard size in pixels (say for a navigation bar) to give the pages in your site a consistent appearance. Also, you need to consider the resolution of the user's monitor and whether the pages will be printed.

To convert table sizing from percentages to pixels (or vice versa), first select the table. Then change any of the fields shown below in the properties palette.

convert table sizing

Exercises

Note: For instructions on how to set up practice files for these exercises, go to the Exercise Instructions page.

In Pui.htm, find the heading for "Some Important Tools." Put the information in a table. Add thumbnails of the tools to the table by inserting the images zoom.gif, hand.gif, marquee.gif, lasso.gif, wand.gif, and move.gif.

Note: Take a look at the finished table in UI.htm to get an idea of what you are trying to do.

Here are some other exercises you can do to practice working with tables:

1.	Create a table. Practice selecting the table, rows, columns, and cells
2.	Give the table some headings (in the top row). Add text to the other cells.
3.	Change the dimensions and numbers of rows and columns.
4.	Add a color scheme to the table. Change the colors and thickness of borders
5.	Divide a column into two and then merge the two columns back into one.
6.	Change the alignment of the table. Change the cell spacing and cell padding.
7.	Convert widths into percent and back into pixels.