A tableregardless of the medium in which it appearsis composed of chunks of information arranged in rows and columns. The grid of rows and columns forms the cells in which you can organize text.
In a table, the box made by the intersection of a column and a row is a cell ; cells contain the table content, or data .
Although rows, columns, and data are the minimum requirements for any table, a more elaborate table contains additional elements (see Figure 22.6). It might have column or row headings and a caption above or below it. It might have solid lines, or borders , appearing on all sides and between cells to form a grid. Note, however, that the borders might be omitted so that cell data is neatly organized in rows and columns, but not boxed up (see Figure 22.7).
Figure 22.6. Parts of a table (not all are required).
Figure 22.7. A table with no visible borders.
Tables are transparent the page's background color or pattern shows through areas not covered by cell data or borders. However, a table can have its own background (see Figure 22.8), which does not cover the borders or cell data, but does cover the page's background.
Figure 22.8. A table with its own background.
You can do a great deal to format tables to your liking. But keep in mind that the precise formatting of your tables is greatly controlled by the browser displaying it.
The height and width of cells are calculated automatically based on the number of columns and the length of the cell content. The width of a column is determined by the width necessary to contain the longest cell data in the column. When the data in a cell is long or when a table has many columns, the cell content may be wrapped automatically to allow the table to fit within the window.
The difficulty of creating tables is directly proportional to how fancy you wanna make 'em. A simple, basic table is a snap, as the following example's show. Fancier tables are a little more trouble (as you learn later in this chapter), but then, shouldn't they be?
Keep your first tables simple and get more creative with tables only when you have the basics down pat. You'll do fine. Here's how you insert a new table:
Filling in the Table
Filling in the cells of a table is simple: Just click in the cell and type away, as the following example shows.
When typing in a cell, you can press Enter to start a new paragraph within the cell. You can also apply virtually any type of text formatting you would apply anywhere else in a Web page using the same selection techniques and formatting tools. Specifically, you can apply the following:
The thing to keep in mind about alignment and indenting in table cells is that the formatting is relative to the cell , not to the whole page or even the table. For example, if you apply Center alignment to text in a cell, the text is positioned in the center of the cell, not in the center of the table or page.
Editing and Formatting Tables
So now you've got a table, and you've got formatted text in it. Happy now? If so, congratulationsyou're easy to please . If not, note that you can add cool borders to your table, add and delete columns and rows, add a background color, add a table caption above or below the table, and so on.
In short, creating the table is only the beginning. You can do so much more, mostly just by changing settings in the Table Properties dialog box (see Figure 22.14), as shown in the following examples.
Figure 22.14. Use the three tabs of the Table Properties dialog box to change the look of your table.
Because that box is where it all happens, though, first you need to know how to open it. To open the Table Properties dialog box:
Unless you add a background to a table, the page's background color (or background picture) shows through the table (but does not obscure the table's content or borders). But a table can have its own background, different from that of the page, to make the tableand more important, its contentsreally stand out.
The following example shows how to give a table its own background color. To learn how to give a table its own background picture, see Chapter 25, "Adding Pictures (and Picture Backgrounds)."
Adding a Caption
A caption is a title or other label for a table that appears directly above or below the table (see Figure 22.17). Although the text of the caption does not appear within a table cell, the caption is a part of the tableif you move or delete the table, the caption goes with it.
Figure 22.17. A caption titles a table.
To add a caption, check the Include Caption check box in the Table Properties dialog box, choose Above Table or Below Table, and then click OK. A dashed line (refer to Figure 22.17) appears where the caption will go. (The dashed line shows up only in Composer; it doesn't appear when the page is browsed.) Click in the box and type your caption.
Creating Column and Row Headings
What's a heading , anyway? It's text that's formatted differently from the rest of the table data (and maybe also enclosed in cells that are formatted differently) so that it is clearly not meant as table data, but rather as a descriptive label for a row or column (see Figure 22.18).
Figure 22.18. Apply unique text or cell formatting to a row or column to create headings.
You can create column or row headings by simply applying unique formatting to the text in the top or bottom rows (column headings) or leftmost or rightmost columns (row headings).
Applying bold or italic, making the font different, increasing the text size, giving the row containing the headings their own background (as you learn to do in the next section), choosing a unique text color, or doing all of the above is an easy way to create headings.
Working with Rows, Columns, and Cells
When you first create a table, as described earlier in this chapter, you choose the number of rows and columns and you get a table that's a nice, regular grid. Often, that's just what you want. But, sometimes, after entering some of your data, you find that you need to add or delete rows or columns or change other aspects of the table's appearance.
In the next few sections, you learn how to manipulate rows, columns, and cells to create precisely the table you want.
Changing the Width or Alignment of a Table
By default, the tables you create fill the full width of the page. You can choose to make your tables narrower than that.
When a table is narrower than the full width of the page, you have another decision to make: alignment. Do you want the table to be positioned along the left side of the page (left alignment), on the right (right alignment), or in the center (center alignment)? The following example shows how to change table width and alignment.
Adding and Deleting Rows and Columns
When entering data, you can jump from cell to cell by pressing the Tab key. The Tab key moves among the cells like a reader's eyes, moving from left to right across a row, and at the end of a row it jumps to the leftmost cell in the row below.
But guess what? When you reach the end of the final row and press Tab, a new row appears with the edit cursor positioned in its leftmost cell, ready for a cell entry. This feature enables you to define your table without knowing exactly how many rows it will have. You can simply keep entering data and using Tab to move forward until all the data has been entered. As you go, Composer keeps adding rows as they are needed.
Of course, you might sometimes want to add columns or add new rows between existing rows rather than at the bottom of the table. The following example shows how.
To delete rows or columns, always begin by positioning the edit cursor anywhere in the row or column you want to delete. Choose Edit, Delete Table and then choose Row or Column from the menu that appears.
When you delete rows or columns, keep in mind the following:
Turning Table-Type Text to a Table
Say that you've already got some textfor example, rows and columns of text you've cut and pasted into Composer from another document, such as a word processing document. Using the Composer Tabelize feature, you can transform that text into a table in a snap.
To use Tabelize, the text must already be arranged in rows and columns. Each "row" of the text must end in a carriage return, just as if you had pressed Enter at the end of each line, to break the line. The columns might be formed by spaces or commas between what would be the contents of each cell.
For example, the following text uses spaces to form its columns (this formatting works best when each cell contains only a single word):
When cells can contain two or more words, commas are used to mark the columns:
The following example shows how to tabelize this type of text.
Using a Big Table to Control Page Layout
As you move along through this book, you find that it's very difficult to control the exact location of objects in a Web page, the way you would in a desktop publishing program.
Generally, you must settle for positioning pictures and paragraphs in rough association with another, leaving it up to the visitor's browser to arrange the page.
A popular way to get around this limitation is to create a table that fills the entire page and then put all the page's contents in table cells (see Figure 22.24). This approach gives you much better control of where objects appear in relation to one another.
Figure 22.24. The dashed lines displayed by Composer reveal that this whole page is a table, which keeps the page elements neatly organized.
If you use some kinds of templates or certain Web authoring programs (such as Microsoft Publisher), you find that these approaches might rely heavily on tables for page layout. For example, if you create a layout in Publisher and then use the Publisher tools to convert the layout into a Web page, you will discover that the resulting page is a big table. Publisher does this to preserve the organization of the page as faithfully as possible.
You needn't do anything special to use a big table for page layout. Just start with a blank, empty page and then insert a table. Use the Table Properties dialog box to make the table's width 100 percent of the window. The new table takes up the full width of the page, and its height expands as you add the page's contents to the cells.
When pages are formatted with tables this way, borders typically are not used. But you can add the borders if you want to. It's your page.