About Tables


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 .

graphics/bookpencil_icon.gif

You can put text or pictures in a table cell. You learn how to put a picture in a table cell in Chapter 25.

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).

graphics/22fig06.gif

Figure 22.7. A table with no visible borders.

graphics/22fig07.gif

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.

graphics/22fig08.jpg

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.

Table Basics

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:

  1. Click at the spot in your page where you want to insert a table.

  2. Click the Table button on the Composer toolbar or choose Table, Insert Table (see Figure 22.9).

    Figure 22.9. Step 2: Click the Table button.

    graphics/22fig09.jpg

  3. In the Number of Rows and Number of Columns boxes, choose the number of rows and columns for the table.

  4. Adjust in the dialog box any of the other options you want to change; you'll learn what all these options mean during the remainder of this chapter. (Note that you can ignore these options for now and adjust them later in the Table Properties dialog box, as described later in this chapter.)

  5. Click OK (see Figure 22.10).

    Figure 22.10. A new table, ready for content or formatting.

    graphics/22fig10.gif

graphics/lightbulb_icon.gif

The dashed lines that show the table borders (see Figure 22.10) and gridlines appear just to show you where your table isthey don't show up when the page is viewed through a browser. That's okaya table without borders still organizes its contents into rows and columns and can look pretty cool. But if you really want visible borders, you'll learn how to add them later in this chapter.

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:

  • Paragraph styles (normal or heading, for example)

  • Fonts and attributes (bold, italic, and color, for example)

  • List formatting (bulleted or numbered)

  • Alignment (left, right, or center)

  • Indenting

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.

graphics/lightbulb_icon.gif

In addition to being able to put ordinary text in table cells, you can also put pictures and links in them. To add a link, just type the text in the cell, highlight it, and then create the link as you would any other link (see Chapter 23, "Making Links").

To learn how to put pictures in table cells, see Chapter 25.

  1. Click in the cell in which you want to type (see Figure 22.11).

    Figure 22.11. Step 1: Click in a cell.

    graphics/22fig11.gif

  2. Type whatever you want (see Figure 22.12). Observe that the height of the cell expands as necessary to accommodate whatever you type.

    Figure 22.12. Step 2: Type away.

    graphics/22fig12.gif

  3. Press the Tab key to jump to the next cell (or click in the cell you want to fill next ). See Figure 22.13.

    Figure 22.13. Step 3: Press the Tab key to jump to the next cell, and keep typing.

    graphics/22fig13.gif

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.

graphics/22fig14.gif

graphics/lightbulb_icon.gif

To experiment with borders, captions, and anything else in the Table Properties dialog box, make any changes in the dialog box and then click the Apply button rather than OK.

The changes are made in the table, but the Table Properties dialog box remains open so that you can try different settings without having to reopen it.

Keep experimenting, clicking Apply each time, and then click OK when you see what you want to keep, or click Cancel to close the dialog box without making any changes to the 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:

  1. Click anywhere in the table.

  2. Choose Format, Table Properties from the menu bar.

graphics/lightbulb_icon.gif

You can also open the Table Properties box by right-clicking on the table and choosing Table Properties from the menu that appears.

  1. In the Table tab of the Table Properties box, check the check box next to Border Line Width.

  2. In the box to the right of Border Line Width, type a number for the width (line thickness ). For example, type 4 to create a border that's four pixels wide. The higher the number, the thicker the border. A 1-pixel border is thin and delicate; a 6-pixel border is bold and sassy (see Figure 22.15).

    Figure 22.15. A nice, fat, 6-pixel border.

    graphics/22fig15.gif

  3. Click OK.

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)."

  1. In the Table tab of the Table Properties box, check the Use Color check box.

  2. Click the button to the right of Use Color to display a list of basic colors to use for the table background (see Figure 22.16).

    Figure 22.16. Step 2: Click the button to the right of Use Color to display a chart of colors to use for your table background.

    graphics/22fig16.gif

  3. Click the box containing your color choice and then click OK in the Tables Properties dialog box.

graphics/lightbulb_icon.gif

You can use a different background for a selected cell or row than for the rest of the table; for example, you can give the top row its own, unique background color to make column headings stand out.

To begin, click in a cell whose background you want to choose (or any cell in the row or column whose background you want to choose) and open the Table Properties dialog box. Choose the Row tab (to choose a background color for the row) or the Cell tab (to choose a color for a cell). On the tab you selected, check the Use Color check box and choose a color.

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.

graphics/22fig17.gif

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.

graphics/22fig18.gif

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.

  1. Click anywhere in the table and choose Format, Table Properties.

  2. To change the width, make sure that the Table Width check box is checked on the Table tab and that the % of Window option is selected in the box to the right of Table Width. Then enter the percentage of the window you want the table to fill (see Figure 22.19). For example, enter 50 to make the table half as wide50 percentas the full width of the page.

    Figure 22.19. Step 2: Change the percentage width.

    graphics/22fig19.jpg

  3. If the width is less than 100 percent, you might select an alignment for the table. By default, tables are left-aligned. To change that, choose an option from the top of the Table tab: Center or Right. Figure 22.20 shows a table with changed width and alignment.

    Figure 22.20. A changed table: 75 percent wide, center alignment.

    graphics/22fig20.gif

graphics/lightbulb_icon.gif

When choosing a width, avoid changing the % of Window option to its alternative, pixels. Choosing this option enables you to specify the table width as a number of pixels on a screen rather than as a percentage of the window.

Different monitors and computers running at differing resolutions handle that instruction in unpredictable ways. For example, a table 240 pixels wide appears as about half the width of the screen on a computer configured to use the Windows minimum standard resolution (640x480). But the same table, on a computer configured for higher resolutions , might fill only 30 percent, 25 percent, or even less of the screen. Stick with percentages.

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.

  1. Click in a row directly above or below where you want the new row to appear, or in a column directly to the left or right of where you want the new column.

  2. Choose Insert, Table, as shown in Figure 22.21.

    Figure 22.21. Step 2: Choose Insert, Table.

    graphics/22fig21.jpg

  3. Choose Row (to add a new row) or Column (to add a column).

graphics/lightbulb_icon.gif

To delete a whole table, click anywhere in the table and choose Edit, Delete Table, Table.

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:

  • Any data in the deleted row or column is deleted too.

  • When you delete a row, rows below it shift upward to fill the gap.

  • When you delete a column, rows to the right shift to the left to fill the gap.

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):

Blue Orange Gray

Purple Red Yellow

Aqua Maroon Fuchsia

When cells can contain two or more words, commas are used to mark the columns:

Mark Antony, Cleopatra, Julius Caesar

Romeo, King Lear, Hamlet

The following example shows how to tabelize this type of text.

  1. Create or copy-and-paste the text in Composer.

  2. Select the text to be tabelized (see Figure 22.22).

    Figure 22.22. Step 2: Select the text to be tabelized.

    graphics/22fig22.gif

  3. From the menu bar, choose Tools, Tabelize.

  4. Choose By Commas (if commas separate the columns) or By Spaces (if spaces separate the columns). The result appears in Figure 22.23.

    Figure 22.23. A table from text.

    graphics/22fig23.gif

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.

graphics/22fig24.gif

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.

graphics/lightbulb_icon.gif

Advanced Web authoring tools, such as Macromedia Dreamweaver and Microsoft FrontPage, do enable you to precisely position text and graphics in a Web page (without using a table), just as you would in a desktop publishing program. In FrontPage, this capability is called absolute positioning .

The downside of absolute positioning is that it relies on a less-than -well-standardized set of technologies, collectively called Dynamic HTML (DHTML), that are supported in Internet Explorer 5 and in Netscape Navigator 46, but barely supported anywhere else.

If you use absolute positioning or other DHTML tools, but still want your Web pages accessible to everybody, you must offer two versions of your pages online: One for those using browsers that support DHTML and another (without absolute positioning) for everybody else.



Sams Teach Yourself Internet and Web Basics All in One
Sams Teach Yourself Internet and Web Basics All in One
ISBN: 0672325330
EAN: 2147483647
Year: 2003
Pages: 350
Authors: Ned Snell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net