10

Coming to the HTML Table

In This Chapter

Introducing HTML tables

Creating tables in Dreamweaver CC

Sorting table data

Nesting tables

HTML Tables offer an ideal formatting option when you need to format tabular data, such as the contents of an Excel spreadsheet or any other data that is best displayed in consistent columns and rows.

In the early days of the web, tables were used to create page designs, but that method is no longer recommended with the advent of CSS. (See the sidebar, Why tables were used for creating page layouts, later in this chapter.) Even though tables are no longer recommended for creating page layouts, you may find this chapter helpful if you’re working on a site that was designed the old-fashioned way.

In this chapter, you discover how to create and edit tables in Dreamweaver in the few cases where tables are still the best solution — when you need to format or sort tabular data in columns and rows.

Understanding HTML Tables

Tables are made up of three basic elements: rows, columns, and cells. If you’ve ever worked with a spreadsheet program, you’re probably familiar with tables. Working with tabular data in HTML tables is similar to working with a spreadsheet: In most cases, you’ll want to create a row of headings along the left side or top of a table and then create columns and rows that can be populated with text, images, and other data, as shown in Figure 10-1.

Photos by Janine Warner

Figure 10-1: Dreamweaver makes it easy to create and edit HTML tables, which are ideal for formatting tabular data.

The code behind an HTML table is a complex series of <tr>, <th>, and <td> tags that indicate table rows, table header, and table data cells, respectively. Figuring out how to type those tags so that they create a series of little boxes on a web page was never an intuitive process. If you wanted to merge or split cells to create rows or columns with varying numbers of cells, you faced a truly complex challenge.

Thanks to the cybergurus at Adobe, Dreamweaver makes this process much easier. With Dreamweaver, you can

Create tables and modify both the appearance and the structure of a table by simply clicking and dragging its edges.

Insert any type of content into a cell, such as images, text, and multi-media files — even nested tables.

Add or remove columns and rows in a table using the Table option in the Modify menu.

Use the Property inspector to merge and split cells, add color to the background or borders, and change the vertical and horizontal alignment of elements within a cell.

---

---

Creating Tables in Dreamweaver

You can insert a table by clicking the Table icon in the Layout Insert panel or by using the Insert menu, as shown in the step-by step instructions that follow. Don’t worry about perfecting the settings; you change all of these options later (with the exception of the accessibility settings, which can be edited only in Code view after you’ve created a table). The sections that follow explain how to further edit and refine the appearance of a table after you’ve created it.

To create a table in Dreamweaver:

1. Choose Insert⇒Table, or click the Table icon in the Common or Layout Insert panel.

The Table dialog box appears, as shown in Figure 10-2.

Figure 10-2: Use the Table dialog box to specify table settings.

2. In the Rows and Columns fields, specify the number of rows and columns, respectively, you want in your table.

3. In the Table Width field, enter the width of the table and then select Percent or Pixels from the drop-down list.

If you choose Pixels, the table will be created in a fixed size. If you choose Percent, the table will expand or contract in size based on the size of the browser window. For example, if you create a table and set the size to 80 percent, the table will fill 80 percent of the browser window space.

4. In the Border Thickness field, specify the thickness of the border of your table in pixels.

You can enter a 0 in this field to create a table with no visible border.

5. In the Cell Padding and Cell Spacing fields, enter the number of pixels of cell padding and cell spacing, respectively, for your table.

The padding and spacing fields can be left blank to create a table with no extra padding or spacing. Alternatively, you can create a CSS style that specifies spacing.

6. Choose a Header option by clicking the icon that represents the header position you want in your table.

In Figure 10-2, I selected the Top option under Header to create a row of Header cells across the top of my table.

7. (Optional) In the Accessibility fields, add a caption and a summary.

These fields provide extra information that can be useful to the hearing impaired and other people who are surfing the web using screen readers or other web browsers that read web pages aloud. You find more information about accessibility issues in the section, Making tables more accessible, later in this chapter.

8. Click OK.

The table is added to the page in Dreamweaver and the Table dialog box closes.

9. To add text to a table, click to place your cursor in any table cell and then type the data you want in that cell. Repeat for each cell.

Alternatively, you can use Edit⇒Paste Special to insert columnar data from another program, such as Excel.

10. To insert an image into a cell, click to place your cursor in any table cell and then choose Insert⇒Image⇒Image. Repeat for each cell.

Alternatively, you can use Image icon in the Common Insert panel.

11. Apply formatting options, such as bold or italic, to selected cells and their contents by choosing the option from the Property inspector.

The Specifying cell options, Aligning table content in columns and rows, and Merging and splitting table cells sections, which follow, explain the basics of table formatting.

You can edit all table options, except the Accessibility options, in the Property inspector after you create a table. When you select a table or cell by clicking it in Dreamweaver’s workspace, the attributes appear in the Property inspector at the bottom of the work area. Click the border of any table to select the entire table, and the Property inspector displays the table options, as shown in Figure 10-3. To view all options, click the expander arrow in the lower-right corner of the Property inspector. (All these options are described in the next section.)

Photo by Janine Warner

Figure 10-3: The Property inspector displays table properties when a table is selected.

Sometimes selecting the entire table and not just an individual cell is tricky. If you’re having trouble selecting the table, simply place your cursor anywhere in the table and choose Modify⇒Table⇒Select Table.

Changing your table’s appearance

When you select a table in Dreamweaver, the Property inspector gives you access to the following options for customizing your table’s appearance:

Table: Provides a text area where you can enter a name for a table. This name, or ID, is useful for targeting the table in scripts.

Rows: Displays the number of rows in the table. You can alter the size of the table by changing the number. Be careful, though: If you enter a number that is smaller than the number of rows in your table, Dreamweaver deletes the bottom rows — contents and all.

Cols: Displays the number of columns in the table. You can alter the size of the table by changing the number. Again, if you enter a number less than the number of columns in your table, Dreamweaver deletes the columns on the right side of the table — contents and all.

W (width): Displays the width of the table. You can alter the width by changing the number. You can specify the width as a percentage or a value in pixels. Values expressed as a percentage increase or decrease the table's size relative to the size of the user's browser window or any enclosing container, such as another table or a <div> tag.

Table dimensions expressed as a percentage enable you to create a table that changes in size when the browser window is resized. For example, if you want a table to always take up 75 percent of the browser window, no matter how big the user’s monitor or display area, set the size as a percentage. If you want a table to always be the same size regardless of the browser window size, choose pixels rather than percentages for your table width.

If a table is inserted in another container, such as a <div> tag or a table with a fixed width, the table is sized based not on the browser window but on the container.

Note: Beginning in Dreamweaver CS4, you no longer find an H (height) field. As a best practice, most designers don’t specify table height because the table’s contents may change from one visitor to another. For example, the font size of text depends on a user’s system and settings.

CellPad: Specifies the space between the contents of a cell and its border.

CellSpace: Specifies the space between table cells.

Align: Controls the alignment of the table on the web page. The options are Default, Left, Center, and Right. As a general rule, the Default setting aligns the table from the left side of the browser window or other container.

Border: Controls the size of the border around the table. The larger the number, the thicker the border. If you want the border to be invisible, set it to 0.

Class: Provides easy access to style sheet options. (See Chapters 5–7 for more on CSS.)

Clear and Convert: The icons in the lower-left area of the Property inspector (click the expander arrow in the lower-right corner to view them) provide these formatting options:

• Clear Row Heights and Clear Column Widths enable you to remove all height and width values at one time.

• Convert Table Widths to Pixels and Convert Table Widths to Percent enable you to automatically change Width settings from percentages to pixels. Pixels specify a fixed width; a percent setting means the browser automatically adjusts the specified percentage of the browser display area.

You can also apply formatting options and change the attributes of any element — such as text, an image, or a multimedia file — within a table cell. To do so, select the element and then use the options in the CSS or HTML Property inspector to make your desired changes, just as you would if the element weren’t in a table cell. See Specifying cell options, later in this section, for more details.

Making tables more accessible

A few simple behind-the-scenes elements can make your tables more accessible to people who are blind or have limited sight and view web pages with screen readers. Screen readers are special browsers that read the contents of a web page aloud.

One important element is the table header (<th>) tag for table headings. The <th> tag adds bold formatting and centering to content, and identifies the content as the header of the row or column.

For example, suppose you have a table like the one in the Chocolate Game Rules website, which includes a list of contestants and their game scores (refer to Figures 10-1). Identifying text in the top row with the table header tag tells the screen reader to repeat the heading before each column name and number. Thus, instead of just reading a long list of names and numbers, the screen reader will identify each cell by the name of the header as it reads through the contents.

You don't have to make all your table headings bold and centered just because you use the table header tag. Like any other HTML tag, you can alter the formatting of the <th> tag by creating a tag style (as I explain in Chapter 5).

Dreamweaver also includes Accessibility options at the bottom of the Table dialog box when you first insert a new table (refer to Figure 10-2). Here’s what those options do:

Caption: If you enter a table caption, it’s displayed within the table. You can specify where the caption appears with the Align Caption option.

Summary: The Table Summary doesn’t appear in a web browser but prompts a screen reader to describe the table for visitors who can’t see the contents of the table. This gives your visitors overall context before they hear the entire table read out loud.

If you don’t include these Accessibility settings as you insert your table, you can’t go back to a dialog box with these options in Dreamweaver to insert them later. To add a label and summary to a table after you insert it into a page in Dreamweaver, you have to re-create the table or add the code manually in Code view.

---

---

Specifying cell options

In addition to changing overall table settings, you can specify options for individual cells in a table. When you select a cell, which you can do by clicking to place the cursor anywhere inside the cell area, the Property inspector changes to display the individual properties for that cell (see Figure 10-4), such as the formatting and alignment of the contents of a particular cell.

Figure 10-4: The Property inspector (in CSS mode) displays cell properties when <td> or <th> tags are selected.

Beginning in Dreamweaver CS4, the Property inspector features both HTML and CSS settings. CSS settings are generally preferred and work the same for the contents of a table cell as they do for content anywhere else on a web page. (See Chapters 5–7 for more on using CSS.)

You can also change multiple cells at the same time. For example, suppose that you want to format some (but not all) cells in your table with a certain background color and style of text. You can apply the same properties to multiple cells by selecting more than one cell at a time before choosing the settings in the Property inspector. Any properties you change in the Property inspector apply to all selected cells. Here are tips for selecting cells:

To select adjacent cells, press the Shift key while clicking to select cells.

To select multiple cells that aren’t adjacent, press the Ctrl key (the key on the Mac) and click each cell you want to select.

If you’re having trouble selecting an individual cell because it contains an image, click the image and then use the ← or → key on your keyboard to move the cursor and deselect the image, which activates the Property inspector and displays the options for that cell.

When one or more adjacent cells are selected, the top half of the Property inspector controls the formatting of text and URLs in the table cells. The lower half of the Property inspector provides the table cell attribute options (refer to Figure 10-4), as follows:

Merge Selected Cells Using Spans icon: Merges two or more cells. To merge cells, you must first select two or more cells by clicking and dragging or by pressing the Shift or Ctrl key while selecting multiple cells.

Split Cell into Rows or Columns icon: Splits one cell into two. When you select this option, a dialog box lets you specify whether you want to split the row (split the cell horizontally) or the column (split the cell vertically). You can then specify the number of columns or rows, which controls how many times the cell divides. Note that you can apply the Split Cell option to only one cell at a time.

See the Merging and splitting table cells section, later in this chapter, for more details about working with these options.

Horz and Vert: Controls the horizontal alignment or vertical alignment, respectively, of the cell contents. See the next section, Aligning table content in columns and rows, for tips on working with the Horz and Vert alignment options.

W and H: Controls the cell’s width or height, respectively.

No Wrap: Prevents word wrapping in the cell. The cell widens to accommodate all text while you type or paste it into a cell. (Normally, the excess text just moves down to the next line and increases the height of the cell.)

Header: Formats a cell’s contents by using a header tag, which displays the text in bold and centered by default in most web browsers.

Bg (color): Click in the color well to select a background color from the color palette or enter a hexadecimal color code in the text field. If you use the color palette, the hexadecimal code is entered automatically in the Bg color field. Make sure you include the # sign if you add your own hexadecimal color or the color will not display properly in many browsers.

Although the alignment, color, and formatting options in the Property inspector are handy, using CSS is the preferred option. You learn more about working with CSS and creating styles to alter the appearance of HTML tags, such as the table tags, in Chapters 5–7.

Aligning table content in columns and rows

Clean alignment of elements in columns and rows makes your table neat and easy to read. Achieving that look can be tricky, however, because you don’t have as much control in HTML as you have in a program such as Excel, where you can align numbers to the decimal point, for example. In an HTML table, you can align the content of columns to the left, right, or center. The following steps explain the basics of aligning rows and columns in your table (and you find tips for solving common alignment problems, too):

1. Select the column or row for which you want to change the alignment.

Place the cursor in the first cell in the column or row you want to align; then, click and drag to highlight all the columns or rows that you want to change.

2. Choose an alignment option from the Horz (horizontal) or Vert (vertical) drop-down lists in the Property inspector, as shown in Figure 10-5.

The content of the cell adjusts to match the selected alignment option.

Alternatively, you can access many formatting options, including alignment options, by selecting a table and then right-clicking (Windows) or Control-clicking (Mac).

Figure 10-5: You can specify the horizontal and vertical alignment of cell contents using the Property inspector.

If you follow the preceding steps but table contents still aren’t aligning, try the following tips:

If you use the same number of digits after the decimal point in all your numbers, you can get them to line up in a column. For example, if one price is $12.99 and another is $14, express the latter as $14.00; then, when you right align, the numbers line up properly. (If your columns still aren’t lining up the way you want them to, consider using a monospace font, such as Courier, which lines up better.)

If you’re having trouble aligning the contents of adjacent cells, set the vertical alignment to Top. A common frustration when you’re building tables is that you have two or more rows side by side with text in one and images in the other, and you want the top of the image and the top of the text to line up. Often they don’t line up because they’re different lengths, and the table is trying to adjust the contents to best use the space within their respective cells. The solution is simple: Select all the cells you want to align, and in the Property inspector, change the vertical alignment to Top. Seemingly like magic, all the content jumps to the top of the cells and lines up perfectly. This is such a common problem that I routinely set the vertical alignment of table cells to Top.

Make sure you use the same formatting, paragraph, and break tags if you want the contents of adjacent cells to line up. Another situation in which the contents of adjacent cells don't line up properly occurs when you include paragraph tags around the text or an image in one cell but not in another. Use Split view (by clicking on the Split button at the top of the workspace) and make sure that the code in both cells matches. If you have <p> tags around the contents in one cell and not in another, make sure to include them in the second cell or remove them from the first so that both cells match.

Merging and splitting table cells

Sometimes, the easiest way to modify the number of cells in a table is to merge cells (combine two or more cells into one) or split cells (split one cell into two or more rows or columns). With this technique, you can vary the space in table sections and customize table structures. For example, you may want a long cell space across the top of your table for a banner and then multiple cells below it so that you can control the spacing between columns of text or images. The following two sets of steps show you how to merge and split cells in a table.

To merge cells in an existing table, follow these steps:

1. Highlight two or more adjacent cells by clicking and dragging the mouse from the first cell to the last.

You can merge only cells that are adjacent to one another.

2. Click the Merge Selected Cells Using Spans icon, in the lower-left region of the Property inspector (labeled in Figure 10-5), to merge the selected cells into a single cell.

The cells are merged into a single cell by using the colspan or rowspan attributes. These HTML attributes make a single cell merge with adjacent cells by spanning extra rows or columns in the table.

To split a cell, create a new table or open a page with an existing table and follow these steps:

1. Click to place the cursor inside any cell you want to split.

2. Click the Split Cell into Rows or Columns icon, in the lower-left region of the Property inspector (labeled in Figure 10-5).

The Split Cell dialog box appears.

3. Select Rows or Columns in the dialog box, depending on how you want to divide the cell.

You can split a cell into any number of new rows or columns.

4. Type the number of rows or columns you want to create.

The selected cell is split into the number of rows or columns you entered.

Sorting Table Data

When you’re working with lots of columnar data, you want to be able to sort that data just as you do in a spreadsheet program, such as Excel. In Dreamweaver, you can sort data even after you format it in HTML but you don’t have as many options as you do in Excel. For example, you can sort an entire table based on a specified row, but you can’t sort different rows individually.

To use the Sort Table Data feature, create a new, blank HTML page, add a table with several rows and columns, and add some content. (I explain how in the preceding section.) You may also open an existing page with a table of columnar data. Then, follow these steps:

1. Select the table you want to sort.

To select a table for sorting, simply place the cursor in any cell of the table you want to sort.

2. Choose Commands⇒Sort Table.

The Sort Table dialog box appears, as shown in Figure 10-6.

Figure 10-6: You can sort cell contents alphabetically or numerically, even after they’re formatted in HTML.

3. Specify which column you want to sort by and then choose Alphabetically or Numerically and then Ascending or Descending.

You can set up one or two sorts to happen simultaneously and opt whether to include the first row and whether to keep the <tr> (table row) attributes with a sorted row by selecting Keep All Row Colors the Same.

4. Click OK.

The selected cells are sorted, just as they are in a program such as Excel. (Pretty cool, huh?)

Nesting Tables within Tables

Placing tables within tables, or nested tables, can help you create extremely complex designs. For example, with a table that contains scores of all the baseball games in a season, you could add a smaller table inside one cell to include detailed stats of an exceptional game. You create nested tables by inserting a table within a cell of another table.

The best web designs communicate the information to your audience in the most elegant and understandable way and are easy to download. To make sure that your designs don’t get too messy, remember these guidelines:

A table within a table within a table is nested three levels deep. Anything more than that gets hairy.

Pages that use nested tables take longer to download because browsers have to interpret each table individually before rendering the page. For some designs, the slightly longer download time is worth it, but in most cases, you’re better off adding or merging cells in one table, as I explain in the section Merging and splitting table cells, earlier in this chapter. One situation that makes a nested table worth the added download time is when you want to place a table of financial or other data in the midst of a complex page design.

To place a table inside another table, follow these steps:

1. Click to place the cursor where you want to create the first table.

2. Choose Insert⇒Table.

The Insert Table dialog box appears.

3. Type the number of columns and rows you need for your design.

4. Set the Width option to whatever is appropriate for your design and then click OK.

The table is sized automatically to the width you set.

5. Type the information that you want in the table cells.

6. Click to place the cursor in the cell in which you want to place the second table.

7. Repeat Steps 2–5.

The new table appears inside the cell of the first table.