Creating Tables in Dreamweaver CS4
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In the early days of the web, pages were laid out with tables instead of CSS. Many browsing devices interpret tables as what they actually are—rows and columns of data—rather than as a comprehensible page layout. When CSS came along, people came to believe that "tables are bad" because pages should be laid out with CSS. That was a bit of an overreaction. Tables are not good for page layout; but they are very good, and very necessary, for displaying rows and columns of data.
- If necessary, use the Files panel to open the file santorini.html in the lesson03 folder.
- Scroll to the bottom of the page, to where you see the text Insert table here.
Delete that text and leave your mouse pointer in that position.
- In the Insert bar, click the Layout tab, and click the Table icon (see Figure 1).
- In the Table dialog box, type 6 for Rows and 3 for Columns. Ensure that width, border, padding, and spacing are left blank.
These presentation aspects of the table will be created in CSS, making the table more accessible and useful on many devices in addition to the computer screen.
- Make sure the headings are set at the top of each column, and in the Caption field, type Santorini Hotels (see Figure 2).
The table appears in the Dreamweaver document in a squished and unimpressive format, because it currently contains no content and has no size applied (see Figure 3).
Using the Property inspector, you can assign an ID to the table.
- In the Table field, type hotels (see Figure 4).
- Click in the first cell of the top row of the table. Type Town.
- Press the Tab key to move to the next cell in the row. Type Hotel.
- Press Tab once more and type Rating (see Figure 5).
To save time, you'll copy and paste a completed table.
- In the Files panel, find the file table.html and double-click it to open it.
- Click anywhere inside the table and select <table#hotels> in the tag selector (see Figure 6).
- Choose Edit > Copy, or press Control-C (Windows) or Command-C (Mac), to copy the table.
- Close the table.html tab and return to the santorini.html page.
- Delete the incomplete table that you began.
)
)
)
)
)
)