Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

Building Dreamweaver MX 2004 Tables

Laura Gutman goes over some table basics, looks at how Dreamweaver MX 2004 works with tables, and then covers different ways to maximize table-making power in the Dreamweaver environment.
This chapter is from the book

Ah, tables. For most web designers today, tables are the meat and potatoes of what we do every day. They can also be the bane of our existence. We use them for data display and for page layout. They're not inherently difficult to understand, but table code can quickly get cumbersome and difficult to keep track of. And browsers so often don't treat them right. This chapter goes over some table basics, looks at how Dreamweaver MX 2004 works with tables, and then covers different ways to maximize table-making power in the Dreamweaver environment.

Table Basics

Tables themselves aren't difficult to understand, but they're constructed from many bits and pieces, and working with them in Dreamweaver and in the browser is a complex process.

Tables in the Browser

In HTML, tables are created with the table tag. Each table consists of a number of rows, specified by tr (table row) tags. Each row consists of cells, specified by td (table data) or th (table header) tags. Nowhere is the number of columns specified; that's determined by the number of cells in the rows. The basic code framework for a two-row, two-column table looks like this:

This table includes one row of header cells and one of regular data cells. Note that none of the tags involved requires any attributes. Various optional attributes determine how the table will look and behave, including dimensions, border, treatment of cell contents, and so on. Table 8.1 lists the most commonly used attributes and what they're for. Many more attributes are possible, some included in the HTML specification and others for use by particular browsers. (Check the Dreamweaver Reference panel for a more comprehensive list.)

Table 8.1 Commonly Assigned Attributes Used with Tables

Attribute Name

Description

ApplyTo

Values

Name id

Used for identification.

table, tr, td, th

Text string

width (height)

Table or cell dimensions. (Only width is part of the HTML specification, although height may be recognized by browsers.)

table, td, th

Number (pixels) or percent value

border

Whether the element has a border surrounding it.

table, td, th

Number

cellpadding

Gutter space within each cell, between cell edge and contents.

table

Number (pixels)

cellspacing

Space between each cell.

table

Number (pixels)

bgcolor

Background color of the element.

table, tr, td, th

Color, identified by number or name

background

Background image for the element.

table, tr, td, th

URL of an image file

align

Horizontal alignment of cell contents

table, tr, td, th

left, center, right

valign

Vertical alignment of cell contents.

tr, td, th

top, middle, bottom, baseline

colspan, rowspan

How many columns or rows the cell spans—the HTML mechanism for merging cells.

tr, th, td

Number (of columns or rows)


Tables in HTML were originally developed for use in displaying tabular data (see Figure 8.1), but web designers adopted them for use in page layout (see Figure 8.2). With the advent of CSS positioning, tables should be reverting to their original use. However, inconsistent browser support of CSS means that, so far, tables are still the safest best for page layout.

Figure 8.1 A table used for displaying tabular data in a web page.

Figure 8.2Figure 8.2 A borderless table used for setting the layout of a web page.

Tables in Dreamweaver

Because tables are so important, Dreamweaver has a variety of tools and commands for working with them. Some are safer to use than others, and some are more intuitive than others. No matter what your working strategy is, you'll undoubtedly find something in here that you like.

Table Interface Choices

Of course, your first decision, as with anything in Dreamweaver, is whether you want to work with tables in Design view or Code view. But even within the Design view environment, you have choices. What should the table-making interface be like? What visual aids do you need?

Choosing a Table Mode

To choose a table mode, go to the View menu and choose from the options in the Table Mode submenu; or, in the Layout Insert bar, choose one of the three Table Mode buttons (as shown in Figures 8.38.5). In either case, you have three choices:

  • Standard mode (View > Table Mode > Standard Mode)—This default table mode displays tables in Design view approximately how they will look in the browser (see Figure 8.3). It's the mode most experienced Dreamweaver users prefer, but it can be awkward if your table includes a complex structure or tiny cells.

  • Figure 8.3Figure 8.3 A page layout table viewed in Standard mode.

  • Expanded Tables Mode (View > Table Mode > Expanded Tables Mode)—This mode, which is new to Dreamweaver MX 2004, displays tables in Design view with artificially added spacing between and within the cells, and with a visible border even if the table has no border (see Figure 8.4). This mode sacrifices some of the WYSIWYG qualities of Standard mode to make table structure easier to see and table elements easier to select and work with. Working in Expanded Tables mode is the same as working in Standard mode, but with some additional viewing assistance as you go.

  • Figure 8.4Figure 8.4 The same page layout table viewed in Expanded Tables mode.

  • Layout Mode (View > Table Mode > Layout Mode)—Layout mode is more than a means of viewing tables (see Figure 8.5); it's a whole alternative way of working with tables. Although it's very intuitive and attractive to web design beginners, it has its own set of dangers and can lead to badly structured pages. Layout mode is covered in depth later in this chapter (see the section "Working in Layout Mode").

Figure 8.5Figure 8.5 The same page layout table viewed in Layout mode.

Table-Viewing Aids

Whether you're working in Standard or Expanded Tables mode, you have a few extra bits of visual aids that you can call on in the Design view interface:

  • Table Widths (View > Visual Aids > Table Widths)—New to Dreamweaver MX 2004, the Table Widths visual aid shows a horizontal bar across the bottom or top of any selected table (see Figure 8.6). The bar indicates any table or cell dimensions. Clicking its triangle icons also gives you access to some extra help in selecting elements and setting table properties. The Table Widths visual aid works in either Standard or Expanded Tables modes.

  • Figure 8.6Figure 8.6 A selected table showing the Table Widths visual aid.

  • Table Borders (View > Visual Aids > Table Borders)—If you're working in Standard mode, this visual aid shows the edges of borderless tables as dotted lines, so the table structure is visible in Design view, even if it won't be in the browser (see Figure 8.7). Because Expanded mode includes always-visible borders, this aid isn't needed in that mode.

Figure 8.7Figure 8.7 A borderless table in Design view, with and without the Table Borders visual aid.

Inserting Tables

To insert a table (unless you're working in Layout mode), use the Table object in the Layout Insert bar, or choose Insert > Table. Both of these methods open the Insert Table dialog box (see Figure 8.8). In the dialog box, specify the basic structure of your table and click OK to insert the table. Note that, other than specifying rows and columns, you don't have to specify values for any table characteristics while inserting. Also, all table structure and attributes can be edited later through the Property Inspector, so nothing is set in stone here.

NOTE

For more on table accessibility attributes, see the section "Making Your Tables Accessible," later in this chapter.

Figure 8.8Figure 8.8 Inserting a table.

NOTE

The Table object always remembers the values you used the last time you inserted a table, so you probably won't have to deal with every item every time you create another table.

NOTE

Have you ever looked at the code for a brand-new table and seen that each cell contains  ? What's that doing in there?

This is the HTML entity for a nonbreaking space. Some browsers don't properly display empty table cells, so Dreamweaver doesn't let you create them. Every time it sees an empty cell, it tucks a nonbreaking space in there. As soon as you put content in the cell, Dreamweaver removes the space. Delete the content, and the space is back! That's a nice bit of housekeeping taken care of for you.

Selecting Tables

Working with tables means selecting tables, rows, columns, and cells—and that's not always easy. The more you're familiar with the different selecting options and techniques, the more efficiently you'll work with tables. The two main techniques for selecting are by clicking and dragging various items inside the Document window, and by using the Tag Selector. You can also use keyboard shortcuts to navigate around the table and select items within it. For the most part, use the method you like best; sometimes one method works better in a given situation than another, though, so it's a good idea to be familiar with all of them.

Selecting from Within the Document Window

Some people are just born clickers-and-draggers. Clicking something in the Document window is the most intuitive way to select things for most people. With tables, though, there are so many possibilities!

  • Selecting individual cells—First, if all you want to do is set cell properties in the Property Inspector, you don't have to actually select the cell. Just click inside the cell to put the insertion point there, and the cell's properties show up in the lower half of the Property Inspector. To actually select a cell, Ctrl/Cmd-click inside the cell. To select more than one cell at a time, Ctrl/Cmd-click in as many cells as you like. To select multiple contiguous cells, you can also place the cursor inside one cell and drag across as many cells as you like; or click in the first cell, hold down the Shift key, and click in another cell.

  • Selecting rows—Select a row by selecting all of the cells within it.

  • Selecting columns—You can select a column by selecting all of the cells within it. If the Table Width bar is showing, you can also click the triangle in the width indicator for that column and choose Select Column (see Figure 8.9).

  • Selecting the table—Select the table itself by clicking its edge. This takes a surprising amount of hand-eye coordination. You also run the risk of accidentally dragging the edge of the table—and, therefore, resizing it—while clicking. A handy, and safer, shortcut, is to right-click inside any table cell and choose Table > Select Table from the contextual menu. If the Table Width bar is showing, you can also click the triangle icon of the table width indicator and choose Select Table.

Figure 8.9Figure 8.9 Using the Table Widths indicator to select a table column.

Selecting with the Tag Selector

The Tag Selector can be your best friend when you're working with tables. First, you can use it as an indicator of where you are in your table's structure. Click inside any cell, or select any cell or row, and the Tag Selector displays the structure of the table around you (see Figure 8.10). Plus, of course, the Tag Selector is great for selecting tags. Just click inside any cell to place the insertion point there; then click on the td tag in the Tag Selector to select the cell, the tr tag to select the row that encloses that cell, or the table tag to select the entire table. The Tag Selector is your author's favorite method of selecting tables.

The Tag Selector is less useful for selecting multiple elements or for selecting table columns (because columns have no tag associated with them).

Figure 8.10Figure 8.10 Using the Tag Selector to select a table element.

Keyboard Navigation and Selection

Dreamweaver has made working with HTML tables very similar to working with tables in word-processing programs or spreadsheets, so your favorite keyboard-access methods from those other programs will work here, too.

To move from cell to cell, press Tab (move forward) or Shift+Tab (move backward). Or, use the arrow keys to move through the contents of your cells and to move from cell to cell.

To select a cell from the keyboard, make sure the insertion point is inside that cell and press Ctrl/Cmd+[ (that's the opening square bracket key). This is the keyboard shortcut for Edit > Select Parent Tag. When you have the first cell selected, you can select adjacent cells by pressing the arrow keys. Or, you can press Ctrl/Cmd+[ again to select the row containing that cell, and Ctrl/Cmd+[ again to select the entire table.

Setting Table Properties

Like just about everything in Design view, tables and cells have associated Property Inspectors to help you work with them. Select a table, and the Table Property Inspector appears (see Figure 8.11). Place the cursor inside any cell, and the lower half of the Property Inspector shows table cell properties (see Figure 8.12). Although table rows have no associated inspector, when all cells in a row are selected, the Property Inspector shows row properties in the cell property area.

Figure 8.11Figure 8.11 The Table Property Inspector.

Figure 8.12Figure 8.12 The Property Inspector showing table cell (or row) properties.

Most of the properties shown in these two Inspectors match up to those shown in Table 8.1. Others can be looked up in the Reference panel (Window > Reference). Read over these few tips and "gotchas" about the Property Inspectors and their settings, though:

  • Empty fields in the cellpadding and cellspacing fields mean that these properties won't be set, which means that the browser determines cellpadding and cellspacing. Most browsers add 2 pixels for each. To create a table with no cell padding or spacing, set both of these properties to 0.

  • Aside from the table border property itself, most border-related properties (border color, individual cell borders, and so on) are nonstandard HTML and won't work in all browsers. Use these with caution, preview carefully, and check the Reference panel as needed for more information.

  • Although the width property is standard HTML, the height property is not. Assigning a height to tables or cells can also cause browser display problems. Avoid setting height unless you have to; if you do need to assign heights, be sure to preview carefully in all target browsers.

  • Many properties dealing with a table's visual display, such as border, bgcolor, and alignment, can be more efficiently set using CSS. (See the discussion on CSS and your tables later in this chapter.)

  • When you use the Background property to set a background image for your table, the chosen image tiles to fill the entire background. Netscape 4 doesn't display this tiling correctly.

NOTE

If you're looking for some quick formatting of a data table, check out the Format Table command in Dreamweaver's Commands menu. It hasn't been updated in awhile and it uses some cumbersome coding, but it contains dozens of quick-and-easy formatting templates for data display in a table. While you're at it, check out the Sort Table command, also in the Commands menu. Very handy!

Changing Table Size and Structure

How big do you want your table to be? How many rows and columns should it have? What about merging cells across columns or rows? All of these common tasks can be performed using the Table Property Inspector, the Document window, and the Modify > Table menu.

Setting (and Removing) Dimensions

You can set table and cell dimensions by typing numbers in the Property Inspector or by clicking and dragging table and cell edges in the Document window. Although the click-and-drag method is certainly more immediately gratifying and intuitive, it's very dangerous because it's so easy to lose track of which dimensions Dreamweaver is adding where. It's also frustrating because tables don't always resize the way you think they will when you're happily dragging edges around.

  • Setting pixel- and percent-based dimensions—In the Table Property Inspector, use the drop-down menu to choose a pixel- or percent-based dimension. A percent-based table width causes the table to resize based on the width of the browser window it's in, or (for tables that are nested inside other elements) the width of the page element containing the table. In the Property Inspector for cells, there's no drop-down menu, but you can still create cells with percent-based dimensions. Just type a % after the width or height number in the input field. Percent-based cell widths take up that percentage of the table's width. (So, if you're assigning percent-based widths to all columns in a table, make sure that your percents add up to 100%.)

  • Converting between pixels and percents—The Table Property Inspector also gives you a set of buttons for converting pixel-based dimensions to percent-based dimensions, and vice versa, for the entire table (and all of its cells).

  • Removing dimensions—For removing dimensions, the Table Property Inspector gives you the Clear Column Widths and Clear Row Heights buttons—very handy if you end up with too many dimensions or the wrong dimensions in a table and want to start over. If you have the Table Widths bar showing, you can also click the triangle under any column and choose Clear Column Width.

Adding and Removing Rows and Columns

When you inserted the table, you specified how many rows and columns it should have. But plans change. Nothing is set in stone.

  • Using the keyboard—To add a row to the bottom of a table, place the insertion point in the last cell in the table (at the bottom right) and press Tab. There's a new row! This makes adding rows as you type contents quick and easy. (The added row has the same attributes as the row above it.)

  • Using the Property Inspector—To add or delete a row or column at the end of a table, you can select the table and change the number of rows or columns. If you replace a larger number with a smaller number, Dreamweaver deletes the bottom row or rightmost column (and its contents). If you make the number larger, Dreamweaver adds a row at the bottom or a column at the right.

  • Using the Document window—To delete a row or column, select it and press Delete. Any contents are deleted as well, of course.

  • Using the Table Widths bar—To insert a column, click the triangle under the column to the left or right of where you want to insert, and choose Insert Column Left or Insert Column Right.

  • Using the menus—The Modify > Table submenu (also available in the contextual menu if you right-click within a table) has a whole range of handy commands, including commands for adding and removing rows and columns.

    • Insert Row/Insert Column—Inserts a row or column directly before (above or to the left of) the row or column containing the insertion point

    • Insert Rows or Columns—A much more flexible command that presents you with a dialog box for inserting as many rows or columns as you like, before or after the insertion point

    • Delete Row/Delete Column—Removes the row or column containing the insertion point

  • Using the Insert bar—New to Dreamweaver MX 2004, the Layout Insert bar includes objects for inserting rows and columns into tables (see Figure 8.13).

Figure 8.13Figure 8.13 The Insert Row and Insert Column objects in the Insert bar.

Merging and Splitting Cells

You can also change a table's structure by merging and splitting cells. To merge two or more cells, select them and either choose Modify > Table > Merge Cells or click the Merge Cells button in the Property Inspector (see Figure 8.12). To split a cell into two or more cells, place the insertion point inside the cell and either choose Modify > Table > Split Cells or click the Split Cells button in the Property Inspector. A dialog box appears, asking how you want the cell split (see Figure 8.14). Choose your options and click OK to close the dialog box and split the cell.

Figure 8.14Figure 8.14 The Split Cell dialog box.

What happens when you merge cells? Dreamweaver applies the rowspan or colspan attribute to one of the selected cells, and removes the other cells. Content from all selected cells is moved into the remaining cell. If it makes more sense to simplify the table's structure another way, however—for instance, if you've just merged cells across every row in a two-column table, creating, in essence, a one-column table—Dreamweaver rewrites the table structure that way. It's possible to create some very sophisticated table structures with merged cells; if you let Dreamweaver take care of rowspan and colspan, nothing will go wrong with the code.

What happens when you split cells? When you split a cell into columns, Dreamweaver increases the number of columns in the table and adds a colspan attribute to all other cells in the current column. That's a pretty major structural change. The same thing happens when you split a cell into rows: The total number of rows in the table is increased, and rowspan is added to other cells as needed.

NOTE

Although there's nothing inherently wrong with merging or splitting cells, don't use these commands as a crutch to shore up badly structured tables. It's much better planning to figure out ahead of time how many rows and columns a table needs, and where cells need to be merged, than to start without planning ahead and merge and split until you've lost track of how the table is built.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020