Tables & CSS

This week we learned how to setup and use tables. Although tables have fallen out of favor with many web developers, myself included, they are useful when used for the purpose of which they are designed. That is to present tabular data. Although, CSS3 does have support CSS table layout, the HTML table structure is faster to develop due to programs like Dreamweaver building most of the HTML code. The downside is that they create lots of code, and if they are used for layout, the nested tables can get unwieldy. The bottom line, in my opinion, is that tables should be used to display tabular data and not used as a page layout tool.

In keeping with the tabular data theme, I created a table based page made up of fictitious data called "Rick's Sales Forecast", click here to skip the design report and see the table.

Having said all that, after watching the videos, I was truly amazed by the versatility that tables provide. I was impressed by the accessibility and the number of "hooks" that can be assigned in order to style tables. Below is a sampling of my learning's during this assignment.

5 Dreamweaver techniques for tables

Here is a summary of techniques I learned this week.

1. Importing Data from Excel
2. 3 tags I didn't know about (thead, tbody, tfoot)
3. Row hover
4. Assigning an id to a single column
5. Assigning a class to individual cells

Importing data from Excel

I was pleased to learn that one can import data, and charts directly from an Excel spreadsheet, or other tabular data. You can access this function by:

File > Import > Excel Document... 	on a PC
File > Import > Tabular Data... 	on a Mac

This brings up a window to browse to the file. Just click on the file and Dreamweaver asks for a description and builds the table. I found it very user friendly. However, I had to do a lot of hand coding to get the table with the correct accessibility. Additionally, it brought in my pie chart inside the table. This was easily corrected and I used the chart as a background.

3 tags I didn't know about (thead, tbody, tfoot)

It was nice to learn about the <thead>, <tbody>, and <tfoot> tags. These were very useful when it came time to style the table. The videos also taught that, you don't have to use these tags, but if you use a <thead> or <tfoot> tag, you must use the <tbody> tag.

Row hover

The tr:hover is a pseudo-selector that can give CSS based user interactivity to your table. It is a nice effect that can give the user clarity on what row of data they are looking at. This is particularly useful for large horizontal tables. I used this effect on my table based page. The videos did point out that most users are used to having a link associated with this type of interactivity. Therefore, you should consider the audience so as not to frustrate them with this visual effect.

Assigning an id to a single column

Using an ID to identify a column is a good accessibility practice. It allows user agents to read down a column smoothly. Additionally, it allows you to style a single column independent of the other columns. In the screen shot below, I have shown how I assigned column id's using the <colgroup> and <col /> tags. I used this to style the first column differently that the rest. Here is the styling for that column. Notice that the first column has an id="service" in the HTML code.

#service {
 background: #6c65d9;
 color: #FFF;
 text-align: left;
 border-collapse:collapse;
 border-bottom: 1px solid #ECECF5;
 }

Assigning a class to individual cells

This was new to me and was very useful for adding my rounded corners to the top of my table. This is done when scoping the columns. First you need to open a <colgroup> and assign id's to each column. Once that is complete, on the header row, you need to scope the columns to match the id's you assigned in the <colgroup> Here you may assign the class to the individual header cells, as I have done in this screen shot. Now you can use them to add styling to the individual header cells. I only needed to do this for the outside cells to give the rounded edges at the top of the table.