Web design basics: How to create snazzy tables and when to use them

Ryan Boudreaux demonstrates the basics of importing and exporting tabular data in Dreamweaver and then sorting and formatting the data to create attractive tables for web pages.

When are tables most effective in presenting data on web pages? The debate on proper use of tables typically focuses on the use of table column and row attributes for page layout and using them to align or position text, graphics, or gradients. Divisions, spans, and, more recently with HTML5, the use of articles, sections, headers, footers, nav, hgroup, and aside are more appropriate for providing sectional and structural elements for web page presentation.

However, while tables aren't appropriate for laying out content, they are a useful tool for presenting important data on web pages, in particular for scientific reports, tabular data, and data which is represented well in a standard spreadsheet format. Examples of data sources and types which lend themselves well to table formatting include comma delimited lists, tabular data, databases, and other sources, which can be queried. Like a comma separated value file or .csv in Oracle, MySQL, SQL Server, MS Access, and MS Excel. Tabular data can also be imported from other sources such as word processing applications such as MS Word and WordPerfect.

In this article, I will employ features native to Adobe Dreamweaver to demonstrate importing and formatting data in table form for web page presentation; however, similar methods can also be utilized with other text editors with similar results.

One of the regular uses for tables -- especially for websites which support teams of scientists -- is updating data on a regular basis, sometimes weekly or daily; of course this can be done automatically with database driven web sites, but on occasion, the data is not readily available in the proper backend database format.

Importing data

Tabular data is delimited, meaning that it has individual pieces of data that constitute each record making up a row, separated by a common delimiter, such as a comma, space, or semi-colon. The example data below demonstrates how each record is delimited or separated by a comma, and these are used to keep the individual pieces of data separated within the record.


1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""","",4900.00
1999,Chevy,"Venture ""Extended Edition, Very Large""","",5000.00
1996,Jeep,Grand Cherokee,"Good Condition! Air, moon roof, loaded",4799.00

This is the same data imported into a comma separated value (CSV) spreadsheet:

Figure A

Any miscreant commas would cause the data to be interpreted as another piece in the record. Once imported into Dreamweaver, the tabular data becomes an HTML-formatted table that can be sorted, formatted, and even exported. Imagine hundreds of lines of records and attempting to manually enter all this data would be a nightmare, but with the Dreamweaver Import Data feature, it only takes a few minutes to get  tabular data formatted.

In Dreamweaver, be sure you have the file open that you wish to update, and then select from the menu File | Import | Tabular Data.

Figure B

This will open up the Import Tabular Data dialog box in Figure B that will enable you to specify which file you want imported by browsing to the source location, and then confirming how the data is delimited -- either as tab, comma, semicolon, colon, or other. You'll select how you want the table to look with cell spacing, cell padding, top row formatting, and border. Once you are done, click OK, and the table is generated with the imported data. Once imported this is how the table looks, as displayed in Figure C.

Figure C

After data is imported into a web document as a table in this fashion, it is no longer linked to the external file; therefore, any updates to the external file will not be reflected in the HTML document. Direct calls to the data from a database backend source such as a MySQL or Oracle database would enable dynamic updating of the data, which is not the scope of this article.

Exporting data

Another option you can utilize is the Export Tool. Select a table from any web document within Dreamweaver by first highlighting the table, then selecting File | Export | Table and select the type of delimiter (tab, comma, etc...) as well as the type of line breaks (Windows, Mac, Unix) that should be applied, as displayed below.

Figure D

Sorting data

Once you have the data imported into the web document, you can now sort the data if you wish, depending on the scale of the project. To begin a sort procedure, place the active cursor in Dreamweaver onto any portion of the table, then from the menu, select Commands | Sort Table.

Figure E

From the Sort Table dialogue box, there are many options, including the sort by column selection, how to order the sort either by alpha or numeric, and the direction of the sort. You can also select to sort by two columns of data which would allow a primary and a secondary sort. Other options include adding the first row, sorting the header rows, sorting the footer rows, and keeping all row colors the same after the sort is complete.

In this example, I selected to sort column 1 numerically in descending order, then column 2 alphabetically in ascending order, as displayed below.

Figure F

The resulting table is sorted as displayed below.

Figure G

Formatting tables

With the tabular data imported and sorted in a base table, we can now apply some formatting using the Format Table command in Dreamweaver. With the active cursor within the table select from the Commands | Format Table.

Figure H

There are many options for formatting the table, including row colors, top row alignment for labels, top row text style, top row background color, and top row text color. Another formatting option is to style the left column with alignment and text styling. The table border size is also customizable; in addition, you can select to apply all styling attributes to the TD tags instead of the TR tags, which means that the selected formatting will apply to the row-specific attributes to each cell instead of centralizing them inside the row tag.

In this example, I kept most of the default selected, however I updated the top row text style to bold, and changed the border to 1, and then clicked Apply and OK. The resulting table format is displayed below.

Figure I

Here is an example of another format selection which was completed in just less than a minute.

Figure J

For on-the-fly updates of tabular data, Dreamweaver works like a charm for importing from delimited data sources, and then sorting and formatting only take a few minutes to establish some snazzy looking tables. In a future piece, I will review using CSS3 for assigning nth-child properties to tbody and styling for data tables.

By Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...