Creating a Table

All content that is contained within a table is always contained within a cell, and every table has one or more cells. A cell is the area created by the intersection of a row and a column. A table must have at least one row and one column, which will create one cell.

Macromedia Dreamweaver 8 provides a variety of tools and options for creating tables. These tools are available through three viewing modes: Standard, Layout, and Extended. Each visual editing mode offers a different perspective on table design and structure while enabling you to create and edit tables.

In this exercise, you will begin to create a page in the Yoga Sangha project site using Standard mode.

Tables versus CSS

In HTML, tables were originally meant as a method to organize informationthey were not intended to be a design tool. Over the years, as Web designers worked to develop more visually appealing and functional Websites, the table became a primary tool for layout. As a result, the contents and structure of Web pages have become more dependent upon one another. CSS gives designers the ability to separate the content from the structure of Web pages. This can be beneficial in terms of increasing accessibility and flexibility, decreasing download time, and decreasing the amount of time that is needed to create and maintain pages. Whether you use tables or CSS to control the layout of your Web pages will depend on a number of factors including browser support, how your pages display across different platforms and browsers, and the desired layout. CSS support is becoming more widespread, but it might not yet enable you to create the layout you want. You'll need to consider the requirements of your Website, weigh the options of using CSS and/or tables, test your pages with both, and choose a layout method(s) accordingly.

1.	Open index.html from the Lesson_06_Tables/Schedule folder. This page already contains content, has basic document formatting set, and integrates CSS to control the appearance of page elementsincluding text and images. You have learned the techniques used to create this page throughout the previous lessons in this book. Tip For additional practice, you can re-create this starting page by beginning with a new blank document and using this page as a guide.
2.	Choose the Layout category on the Insert bar and verify that the Standard mode button is selected. The Standard mode option should be active by defaulta highlighted button indicates the active mode. If Standard mode is not the active table mode, click the Standard button. Tip You can also check the mode or switch to another by choosing View > Table Modea checkmark next to a mode in the menu indicates that mode is active.
3.	Place the insertion point in the empty paragraph between the first paragraph and the horizontal rule and then click the Table button in the Layout category on the Insert bar. Tip The Table button is also available in the Common category on the Insert bar. Alternatively, you can choose Insert > Table or use the keyboard shortcut Option+Cmd+T (Macintosh) or Ctrl+Alt+T (Windows) to open the Table dialog box. The Table dialog box opens. The Table dialog box is split into three sections: Table Size, Header, and Accessibility. The Table Size section contains these options: Rows: The number of table rows. The Dreamweaver default is 3 if you have not previously created a table. Columns: The number of columns. The Dreamweaver default is 3 if you have not previously created a table. Table Width: The width of the table in pixels or as a percentage of the browser window. Tables specified in pixels are good for a precise layout of text and images. Tables specified in percentages are an ideal choice when the proportions of the columns are more important than their actual widths. The Dreamweaver default is 200 pixels if you have not previously created a table. Border Thickness: The width of the table border. The Dreamweaver default is 1 if you have not previously created a table. Cell Padding: The amount of spacing between the cell content and the cell walls. If you leave this option blank, cell padding defaults to one pixel. If you don't want cell padding, be sure to type 0 in the text field. The Dreamweaver default is blank if you have not previously created a table. To the right of the text field is a small table that uses blue shading to illustrate cell padding. Cell Spacing: The amount of spacing between table cells, not including the border. If you leave this option blank, cell spacing defaults to one pixel. If you don't want cell spacing, be sure to type 0 in the text field. The Dreamweaver default is blank if you have not previously created a table. To the right of the text field is a small table that uses blue shading to illustrate cell spacing. These properties can all be changed at a later timethe options in the Table size section are all available on the Property inspector when a table is selected in the Document window. The default values of these options might be different if you have already used the Table dialog box, in which case the values will be the same as the last values you specified for a table. Tip A number of table properties can also be adjusted through the Tag inspectorin a default configuration, the Tag inspector is located between the Application and Files panel groups. You can access the Tag inspector by choosing Window > Tag Inspector. The Header section contains four different placement options for headers: None, Left, Top, and Both. A header is essentially a row or column title that is used to label your content. Headers are most often used for data tables (those that function much like spreadsheets) as opposed to design/layout tables (those that are used to arrange and position visual elements for design purposes). The header option uses the scope attribute to make the information that is placed in header rows or columns act as identifiers for each of the cells in their respective rows or columns. For example, if you use the top header option and type Order in the top cell of the first column, the remaining cells in that column are prefaced verbally by the word Order when read aloud by a screen reader (a type of browser used by visitors with vision disabilities or situations that prevent them from using a standard browser) to indicate the contents of those cells. The option to make a cell (or cells) into headers is also available through the Property inspector and can be modified at a later time, although this will not set the scope attribute. It is important to continually consider how accessible your pages will be to your visitors. The goal of creating accessible pages is to develop content that is functional for the widest possible audience, including those with disabilities. Dreamweaver makes it easy to include accessible features from the beginning through the Accessibility section, which includes the following options: Caption: When you define a caption, it is displayed to all users and can be aligned to the top, bottom, left, or right of the table. If you leave this option blank, no caption is inserted. This option is available only in the Table dialog box. If you want to add this feature at a later time, you need to do so by editing the HTML code, covered in Lesson 16. Summary: A table summary is not displayed on the page; it is read by screen readers and is used to explain the purpose and context of the table. The summary should provide a concise and descriptive, but fairly brief, synopsis of the material contained within the table. It should indicate what the content of the table is. If you leave this option blank, no summary is inserted. This option can be modified at a later time through the CSS/Accessibility portion of the Attributes tab, which is located in the Tag inspector.
4.	Type 2 in the Rows text field and 4 in the Columns text field. Change the Table width to 500 pixels, set the Border thickness to 1, and leave the Cell padding and Cell spacing text fields blank. In the Header section, select Top. In the Accessibility section, type Class Schedule at Yoga Sangha in the Caption text field and choose top from the Align caption menu. In the Summary text field, type Information about the yoga classes available at Yoga Sangha. Each entry includes the day of the week, time, level and instructor for the class. Click OK to close the dialog box. A table with the properties you specified appears on the page and is automatically selected. A table headerthe light gray baris attached to the top of the table. Vertical green lines indicating the left and right boundaries of the table are displayed on the sides of the bar. A green line, with the width value of the table and a menu arrow both shown in the center, spans the topmost portion of the bar. At the portion of the bar closest to the table, a series of shorter green lines, each with its own menu arrow, indicates the widths of the columns. The table header disappears whenever you click outside of the table and reappears whenever the table is active or selected. The table header can obscure nearby content above the table. If the table is the first item in your document, the table header can be attached to the bottom of the table. You cannot control where the bar appears. Tip You can turn the table header visual aid on or off by selecting View > Visual Aids > Table Widths. A checkmark indicates that the option is turned on; no checkmark indicates that the option is off. You can also turn all visual aids on and off through the same menu or with the use of a keyboard shortcut: Cmd+Shift+I (Macintosh) or Ctrl+Shift+I (Windows). The following exercises assume that you have visual aids, including the table header, turned on. A solid black outline, with selection handles on the bottom and right sides, surrounds the table and the caption, indicating that the table is selected. The two rows and four columns are shown with a gray border, which does not surround the caption. You can see the spacing between the cells as a result of the default cell padding that is applied because the Cell spacing option was left blank.
5.	Click in the first cell of the top row and left column. Type Day in the cell; then press Tab to move to the next cell. Type Time and press Tab. Type Level and press Tab. Type Instructor in the last cell. As you type and jump to other cells, the table might automatically shift the widths of the columns to accommodate the text. You can use the Tab key or the arrow keys to move between cells. Tab is the quickest method to jump to the next cell to the right or down to the next leftmost cell if you are at the end of a row. If you move to a cell that already has content in it, that content is selected when you press Tab. Because the top row is the header row, the text that you type is centered and rendered in bold (a default property of table headers). You can use CSS to apply additional formatting. For this exercise, leave the headers as they are.
6.	Place the insertion point on the blank paragraph line below the table.

Tip

If you do not have a blank paragraph line below the table, click after the table and press Return (Macintosh) or Enter (Windows).

When you click outside the table, the columns may shift slightly, changing their widths. The insertion point is now in a new paragraph.

You can enter the data for the table by typing directly into the cells. In the next exercise, however, you will use another method to fill the table with the content.