Lesson 6 - Dreamweaver Tables
Tables were originally used to display data in spreadsheets then web designers figured that tables could be used effectively to organize content into a structured layout. This worked well when browsers ran on desktop computers and laptops but when mobile devices came along the table layouts were incompatible with the smaller screens. Rather than having to redesign the layout for different platforms div tags are used with CSS that is tailored for the different media. The html does not have to change, just the CSS. Now tables are back to where they started, used for displaying data in a table format. In this lesson I'll show you how to make simple tables.
Tables use three main tags: table, table row, and table data.
These primary tags are <table>, <tr> for Table Row, and <td> for Table Data. Table Data specifies each individual cell which can hold content. There are more tags that are specific to tables, but we can get started using just these three tags. Let's create a table and then align some text to a graphic within the table.
To insert a table, go to the Common Category of the Insert Panel and click on the Table button. I'm not going to show you a screenshot because you should be familiar with this process since you've used the Common Objects Panel to insert images, Email Links, Rollover Images, and a Navigation Bar already. You can also go to the Insert Menu - Insert>Table or press Control + Alt.
 |
The Insert Table dialog box is displayed with fields where you can enter numbers. The table below is based on the numbers I entered here. For now, lets just look at the values for Table size. Cell Padding is the number of pixels between the cell's border and the edges of the cell's content. Cell Spacing is the number of pixels between table cells. For sliced images you can use 0 to have the image appear to be whole. |
| Row 1, Cell 1 | Row 1, Cell 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |
The table itself and the content within each <td> can be aligned to left, center or right with the buttons on the property inspector. Click within the first table cell on the top left and click the align right button. Your content should look like the following table.
Row 1, Cell 1 |
Row 1, Cell 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |
Table data can include many page elements such as images, rollovers, navbars, shockwave movies, and textlinks. You can select the entire table, a single cell, individual or multiple content within cells, multiple cells, an entire column, or an entire row. To select the table, click on the top left corner or lower right edge of the table. The cursor will show a tiny table icon at the point where you can click to select the table on the top left corner. You can turn on the table header visual aid by going to the View Menu - View>Visual Aids>Table Widths. Then as you roll the cursor over the table, the header will display. You can click on the dropdown arrow to select the entire table or adjust a few table attributes.
You can also select the table by going to the Modify Menu - Modify>Table>Select Table, or right-clicking in the table to bring up the context-sensitive menu. This menu contains many items for modifying the selected table. You can also use the <table> tag selector at the bottom left of the document window to show the table's properties in the PI.
When the table is selected, it will have a thick border with resize handles on the bottom middle, right bottom corner and right middle borders.
Follow along to add a table to your page and align content to an image
- Click your cursor where you'd like to insert a table in your document.
- Insert a table with 2 rows and 2 columns as instructed above. Make the cell padding 1 and the cell spacing 5. Set the width to 80% and set the border to 10. We'll can change these later. Click OK.
- Click in the first cell (top left). Insert an image. Select the image and copy it (Control + C) or Edit>Copy.
- Use the Tab key on your keyboard to move to the next table cell and paste the image (Control + V) or Edit>Paste. Your table should look like the one above.
Select your table and let's review the Properties Inspector for a Table.
PI - Table
The icon in the top left shows a 2 row, 2 column table. You can name your table in the Table Id textbox, or leave this blank. You can see the original info you selected for the number of Rows and Columns, Width, Cell Padding, Cell Spacing and Border. To add or delete rows or columns, enter a new number in the appropriate field. The 4 icon buttons, to the left of the Src field, clear row heights and widths and convert pixel to percentage or percentage to pixels.
You can add a table background color, fonts, and other CSS properties by bringing up the New CSS Rule window or, if you already have a class defined for the table, you can select it from the Class button in the PI.
Enter the name of the class and then click OK. In the CSS Rule definition window background color, fonts, border width, and any other properties may be chosen.
PI - Table Data (Cell)
The Properties Inspector for a selected cell within a table has different features than the PI for a selected table.
The top part of the PI has the basic CSS fields. Had the HTML mode been selected then the top would have the basic HTML fields. Regardless of the mode the bottom part contains the fields for the selected table cell. The table icon shows the selected cell and the word Cell appears to the right of it. The icons below the Cell are the Merge Cells or Split Cells buttons. The following properties are peculiar to table data.
Horz - Horizontally aligns the content in the cell default, left, center, or right. Default is left for most browsers.
Vert - Vertically aligns the content in the cell to the default top, middle, bottom or baseline of the cell. Default is middle for most browsers.
The W (Width) and H (Height) of the cell can be defined in pixels.
No wrap means that the content of the cell will not wrap at the end of a line. It will push the width of the cell to the right margin.
Header will define the selected cell or cells with the header formats (<th> instead of <td>) which are usually bold and centered by default.
You can insert a Bg in a particular cell or cells. You can define a different Bg background color for every cell or groups of cells.
Note that a table whose border is set to 0 will not show outlines for each cell. The border attribute will display differently in IE than Netscape. Use Dreamweaver's Preview in Browser feature to see the differing displays. You may want to check several browser versions and flavors. IE commands a large % of the market but you still want Netscape users to have a friendly user experience on your site.
Let's get back to our table. We copied and pasted the image into the second cell. Let's do some formatting with these images and the table.
- Insert the cursor into the cell in the second row, first column. That's the bottom left cell. Type this text "this is a header" and check the Header box on your Cell Properties Inspector.
This is a header
- Click in the top left cell and center the image horizontally. You can do that in the PI by using the Cell Horz drop down menu.
- Right click (or control + click on a Mac) in the top right cell to display the context menu and go to Table > Split Cell... . This will bring up a dialog box saying Split Cells Into and Number of Rows or Columns. Select the columns radio button and 2 for the number of columns.
- Copy the image into this newly added cell. Notice how it changes the dimensions of the other cells and the image in the top middle cell.
- Select and copy the table by one of the methods taught above and click the cursor to set an insertion point and then paste in the copied table. Set the Border to 0 and the table will look like the table below.
this is a header
- Select the copied table and change the cell padding and cell spacing to 0. Be sure to click on the 'Clear column widths' icon.
The table width is set to 33% which has the effect of adding spaces between the images.
this is a header no cell padding and
no cell spacing
- Now select the table and drag the right border handle in towards the left so that all 3 images are as close together as they can get. Look at the differences in the table displays. This should illustrate how to get images to align next to one another so they look like they're all one image. Here's one table with 3 images that should look like one single image. The image has been sliced into 3 sections.
Here is the same image with the borders set to 1 pixel. Now you can see the 3 slices.
Expanded Tables Mode
If you found it difficult to insert text into the cell Dreamweaver provides an Expanded Tables mode that makes it much easier to do. Expanded Tables mode temporarily adds cell padding and spacing to all tables in a document and increases the tables' borders to make editing easier. This mode enables you to select items in tables or precisely place the insertion point.
To change to Expanded Tables mode:
- If you are working in Code view, select View > Design or View > Code And Design (you cannot switch to Expanded Tables mode in Code view).
- Do one of the following:
- Select View > Table Mode > Expanded Tables Mode.
- In the Layout category of the Insert panel, click Expanded Tables Mode.
A bar labeled Expanded Tables Mode appears across the top of the Document window. Dreamweaver adds cell padding and spacing to all tables on the page and increases the tables’ borders. Once you have inserted your content you should switch back the Standard mode to make any edits, such as resizing.
To change back to Standard mode do one of the following:
- Click Exit in the bar labeled Expanded Tables Mode at the top of the Document window.
- Select View > Table Mode > Standard Mode.
- In the Layout category of the Insert panel, click Standard Mode.
Dreamweaver Table Tips
You can click hold and drag through multiple table cells and modify properties all at one time. Here I've selected the top two rows of the two left columns. I can change the vertical alignment to top so all the content will start at the top of each of these 4 cells. Or I can simply delete selected cells.
I can also merge these four into one cell by clicking on the Merge selected cells button. I could divide them into more rows and columns by clicking the Split cells button.
 |
 |
| Merge selected cells using span | Split selected cell into rows or columns |
To insert a row from the last cell on the bottom right, press the Tab key on your keyboard.
You can Import Tabular Data such as a spreadsheet from MS Excel or Word into a Dreamweaver Table and retain font formatting, color and styles. Save the document in a tab or comma-delimited format. Delimited format means text separated by commas, tabs, etc. To Import Tabular Data first save the file in a spreadsheet program like Excel in delimited format. Then go to the File Menu File>Import>Tabular Data or the Insert Menu - Insert>Table Objects>Import Tabular Data. This will open the Import Tabular Data dialog box. Browse to select your file and fill in the appropriate settings in the Import Table Data window. This info will display statically, and NOT dynamically. To make it dynamic, you'd need to integrate with an active database (which is beyond the scope of this course) using Cold Fusion, ASP, PhP, Ultra-dev, etc. Try importing tabular_data.txt and tabular_text.txt into a table object.
Make sure the Delimiter: Dropdown menu is set to Tab or Comma.
Export a Table: You can also export a table from DW to place in a spreadsheet or word-processing or page-layout program. To export, go to the File Menu - File>Export>Table... to open the Export Table dialog box. From the Delimiter: dropdown menu select Tab, the default. Other options for the Delimiter dropdown menu are Space, Comma, Semicolon and Colon. From the Line breaks: dropdown menu select the operating system (OS)you are using such as Windows, Macintosh, or Unix. If the table will be used on an OS other than the one in which you're authoring, you will select the appropriate OS from the Line breaks: dropdown menu.
You can use Dreamweaver to Sort Table Data. To Sort Table Data, go to the Commands Menu - Commands>Sort Table... This will open the Sort Table box which may tell you that the Sort Table Commands can not be applied to tables with colspans or rowspans. You'll learn more about these terms in the assigned reading for this lesson. Basically a colspan means a column spanning more than one row. A rowspan means a row spanning several columns.
This cell has a rowspan of 3. |
row 1, column 2 |
| row 2, column 2 | |
| row 3, column 2 |
This cell has a colspan of 3 |
||
Dreamweaver automatically adds a non-breaking space in table cells that have no content. If you look at the code, you'll see - which is the html markup code for a non-breaking space.
Problems with Border Color, Background Color & Background Images
Many of the HTML tag attributes designers have used in the past have been deprecated in favor of CSS styles. For now, most browsers will display background colors and background images in table cells, but be aware that new browsers eventually will ignore these HTML attributes in favor of their CSS equivalents. And even among browsers which still accept these attributes, not all will render colors and images in a table in the manner the designer intended. In particular, tables with a background image (as opposed to data cells with a background image) may appear differently on different browsers/versions if the table has multiple cells or includes nested tables, or the image may not appear at all.
If you are creating your page using xhtml transitional 1.0 DTD and you add a background image or background color from the PI, Dreamweaver will insert deprecated code that will be flagged when you validate the code. To fix this you must change the html code. To remove the deprecated code the attribute must be changed to use the style attribute.
| Deprecated | New | |
|---|---|---|
| Background Color | bgcolor="#FFCC00" | style="background-color:#ffccoo;" |
| Background Image | background="images/photo.jpg" | style="background-image:url(images/photo.jpg);" |
* You will not have to remember all of this because as you are typing Dreamweaver pops up a drop-down menu that shows all of the attribute values that are available.
does the cell background color show in netscape?
in ie? |
table cell background image: is it tiling? |
this is a cell background color |
this is a cell background color |
||
this is a cell background color - does it show in your browser? |
What a mess! |
This is a cell background color |
You can drag the size of individual cells by placing the cursor over a cell border. The cursor will change into an equal sign with one arrow coming out of the top and another arrow coming out of the bottom. This indicates that the borders can be moved by clicking and dragging them to expand or decrease the size of the table at that edge.
Note that Dreamweaver used to come with a selection of pre-set table formats which were located from the Commands->Format Table. It is no longer available as of CS3. If you would like to reinstate it go to Fat Frog Productions which shows step-by-step how to do that.
To ensure that the content in your web site uses all available screen space, use % (percentages) rather than fixed pixel width for your tables. This is also known as designing tables with a "liquid" layout. As you resize your browser, the content will resize to fit into the viewer's screen. Of course, images won't resize but text, flash that's set to %, and other elements will resize. Try resizing your browser on a page that you design with table percentages. Now change your table percentages to fixed width pixels and resize the browser. See the difference? The percentage amount does not have to be set to 100% but don't go above 100%.
Dreamweaver has a grid which can be viewed from the View Menu - View>Grid>Show Grid. The grid can assist you with layout of page elements but will not give you pixel-specific positioning as you might get from a page layout program. The grid will not print or be visible in the browser. The grid is only visible in the authoring environment of the Document Window.
You can use the table tag selector in the bottom left of the status bar to easily select a table.
Try to minimize the amount of tables you create that are within other tables. Tables that are created inside other tables are called 'nested tables'. At my company, our standardization and style guide limits us to 3 nested tables per html document. That doesn't mean we can only have 3 tables per file, but only 3 levels of nesting maximum per table.
You can use Fireworks and/or Photoshop to slice your images and create the table code to copy and paste into Dreamweaver. Slices enable you to place your images seamlessly together into a table layout as I did with the image of the two boys with guitars on this page. An advantage of slicing is that the images could be saved in different file formats. You could have an animation in one slice, a flash movie in another, a .jpg for a gradient or photographic area in another, and a .gif for the rest.
Want to make a calendar in Dreamweaver? It's based on a table structure.
Take your images and text content and insert them into separate table cells. Format them so the text and images align the way you want. You can also use the Alignment dropdown window of the Image Properties Inspector to align an Image to text.
Questions and Comments about Tables - from former students
One difference I have noticed between Netscape 6 and IE 5 is as follows. Netscape will not display a table cell color I have specified unless there is some content within the cell. If there is no content within the cell, Netscape will ignore the specified cell color, and just let the page background color shine through. IE 5, on the other hand, will display the cell color even if the cell is empty. For Netscape, I tried putting an invisible tag, specifically a comment, in the empty cell, but that didn't help. But as soon as I put an image in one empty cell, and some text in the other, Netscape displayed the background color for both cells.
Examples
- Tabular Table Data - tabular_data.txt, tabular_text.txt
- Table Example
* click the link below to continue with this lesson *
Table Content and Hints
