Dreamweaver Assignment 12 – Tables

Photo credit: Anna Lee, uploaded via Flickr, Creative Commons License

12.1 Creating a Table:

Creating a table is often the only logical way to display data.  Fortunately, Dreamweaver makes basic table setup easy.  Simply clicking on the Table icon in the insert bar brings us to the Table Dialogue Box, which prompts us for a few simple parameters.

The Table Dialogue Box

 

As shown above, to get started we really only need to specify whether we want column/row headers, and the number of rows and columns in our table.  Actually, all of the table parameters can be adjusted after the table is created, so we need not worry too much about it now.

12.2 Using Table Properties:

Here we take a look at the properties of our table that are definable in the Properties panel.  We note that we can adjust the number of rows and columns, the overall table width (either in terms of pixels, or percentage of page), the cell padding (analogous to the box padding described in assignment 11), and cell spacing, which is the buffer zone that exits between adjacent cells.

Also, we note that change our preferences on row/column headers, set the table border style, and choose how individual rows and columns align the data within (left, right or centered).

Finally, we note that there is field available for us to name our table, which is always a good idea.

12.3 Using CSS for Formatting Tables:

We learn here that our table is defined with a series of HTML tags.  Specifically, we’ve used the tags <table> (the whole enchilada), <tr> (table row), <th> (table header) and <td> (table data).  We can use these tags in our CSS definitions just as we have used other elements with HTML tags.

“Fine”, you say, “but I want multiple tables on my page, and I want them formatted differently”.  “If I format with the <td> tag, all of my table data will look the same!” 

Well, don’t get your britches in a bundle. Recall that when we add new CSS rules, we can choose the scope of our rules.  Assigning rules to tag types is one way, but there are others.  If we identified our table with a unique name, we can assign CSS rules with an ID qualifier, and therefore assign rules to just the table bearing a specific ID.

12.4 Importing Tabular Data:

Now that we know how to make and format a table on our website, we’re left with the problem of populating the table data.  Not to worry, we need spend an afternoon cutting and pasting cell data to publish our painstakingly colleted data on FOO vs. BAR.

Virtually any tabular data set, whether a database table, query or Excel spreadsheet, can be saved as a delimited ASCII text file.  By choosing the File=>Import=>Tabular Data command, we just browse to our data file, and specify the delimiter.  Presto, instant table!

12.5 Merging and Splitting Table Cells:

Anyone having any experience working with spreadsheets knows well the value of merging cells.  We can do this in Dreamweaver as well.  To do so, just select any two or more cells, and click on the merge cells icon in the Properties panel.  Should you decide that perhaps that was a bad move, you can select a merged cell and click on the split cells icon to break it up again.

12.6 Modifying Rows and Columns:

Adding and deleting rows or columns to a table can be done with a right-click and context menu selection, or right from the properties panel.  Also, column widths and row heights can be adjusted freehand select-and-drag with the mouse, or again, by changing entries in the Properties panel.

12.7 Aligning Tables:

Here we get a word of caution on table alignment.  Note that the Properties panel contains a field labeled Alignment, which adds HTML code to align our table.  We can also adjust table alignment using the margin property in CSS (Note: setting the margin to auto centers the table in the browser).  Our tutor warns us that these controls can fight amongst themselves when at odds with one another.  She recommends leaving the HTML Alignment property set to default whenever we are using CSS for page layout, and making our alignment adjustments with CSS rules.