Ars Informatica
June 23, 2017
Home
Health Care Informatics
Web-based MySQL/PHP Databasing
Programming
Web Development
Favourite Software
Hardware for the Frugal Fanatic
Graphic Design and Image Processing
Free Scripts and Software
About Us
Contact Us
Links
 
 

 Article Feed for this site

Creating complex web page tables using HTML, DIVs, and Cascading Style Sheets (CSS)

July 10, 2009

HTML tables stink.

Suppose you want to convert a simple little Excel table to HTML:

simple table: date and age mapped against weight, length and head circumference

Should be easy, right? Using the HTML <TABLE> and <TR>, <TH>, and <TD> tags, you get

Date Age Height Length Head Circ.
  birth      
         
         
         
         
         

Ugly, but functional. Admittedly, with a hefty chunk of creative Cascading Style Sheets (CSS) definitions, you can get close to the original, especially with something this simple.

So, instead, you figure you can save direct to HTML from Excel. You're right.

It's so easy. You load Internet Explorer. It looks right. But prior experience has left you wary.

It doesn't look quite the same in Firefox, but not bad. But in Chrome - not at all the same. And this is a simple table.

Try it using Dreamweaver, or whatever you use to code your web designs. Make sure to view the results in at least Internet Explorer (at least in versions 7 and 8), Firefox 2 and 3, Google Chrome, Safari.

Is it easy? Did you get the design you intended?

So - how about complex tables, something like this?

sample scoring template for email newsletter software solutions

It just can't be done?

Wrong.

<DIV>s and Cascading Style Sheets deliver, and even make it fairly easy. Below is part of an actual DIV-based table used in an article on selecting an HTML-based email newsletter solution:
 

 
easy
WYSIWYG
templates
images
hyperlinks
mailing lists
local archive
monthly cost/499 users
import links
multiple archives
stats
unsubscribe
plain-text
test email
multi-client preview
Y
Y
>375
Y
Y
Y
Y
14.00
Y
Y
Y
Y
?
Y
N
Y
Y
170
Y
Y
Y
Y
9.95
Y
Y
Y
Y
Y
Y
N
Y
Y
>400
Y
Y
Y
Y
15.00
Y
?
Y
Y
Y
Y
N

 
Here's how it's done:

Define your styles individually for each table - unless they are truly, exactly, identical. This means creating a overriding style for each table, then substyle. Thus, your first style declaration should be something like this:

.sub_table1   { font:8pt Verdana;
                line-height:15px;
                text-align:left;
                width:570px }
This defines the basic font and font weight to be used (though you can change them for specific table rows and/or cells), the default line height, and causes text to be aligned to the left of each cell. The width declaration is especially important. Set it wide enough that the contents of the individual rows do not cause rows and cells to "wrap", i.e. flow onto a next line; this causes some really interesting and ugly artifacts. Next, you want each new row to start on a new line. This requires only one simple declaration: clear:left. However, you may add any other code you require to individualize specific lines, as below:
.sub_table1 .row0   { clear:left;
                      text-align:center }
.sub_table1 .row1   { clear:left }

Make sure you declare these as substyles of the previous table style, to make these declarations unique to this table only. If you don't, a page with multiple DIV tables can get very nasty, very confusing to manage.

Next, define your header cell style(s) - as many as you have unique cell styles for these. Each cell requires the float:left declaration, to place this DIV as far to the left as it can without running into DIVs already floated left. Only way to line cells up cleanly, left to right, in all browsers.

You'll also want to explicitly define a height and width for each cell style. Finally, if you want to customize the appearance by changing fonts, font weights, text alignments, foreground and background colors, and border styles, you'll need to do it here, i.e.

.sub_table1 .header0   { float:left;
                         height:110px;
                         width:130px;
                         border-bottom:1px solid black;
                         border-right:2px solid black }
.sub_table1 .header1   { float:left;
                         background:yellow;
                         height:110px;
                         width:24px;
                         border-right:1px solid black;
                         border-bottom:1px solid black }
.sub_table1 .header2   { float:left;
                         background:#ffff99;
                         height:110px;
                         width:24px;
                         border-right:1px solid black;
                         border-bottom:1px solid black }

etc.

Finally, cell styles are handled the same as headers. Again, the float:left declaration is mandatory. Width and height need to be defined for proper cell positioning and alignment. The rest is optional, but can be customized as much as you like.

.sub_table1 .cell0     { float:left;
                       height:20px;
                       width:130px;
                       border-right:2px solid black;
                       border-bottom:1px solid gray;
                       padding:2px 0 0 0 }
.sub_table1 .cell1   { float:left;
                       height:20px;
                       width:24px;
                       border-right:1px solid gray;
                       border-bottom:1px solid gray;
                       padding:2px 0 0 0;
                       text-align:center }
.sub_table1 .cell2   { float:left;
                       height:20px;
                       width:45px;
                       border-right:2px solid black;
                       border-bottom:1px solid gray;
                       padding:2px 0 0 0;
                       text-align:center }

and so on.

Seems like work? Sure it does. But it creates much tighter code than saving your file from Excel - and it works. It displays consistently across browsers.
 

On display:table, display:table-row, and display:table-cell declarations

The new Cascading Style Sheets table model (CSS 2.1) introduces display:table, display:table-row, and display:table-cell definitions.

DO NOT be tempted to use them. Not yet. I think they're great, in concept - but only some browsers currently implement this code, and even those that do, do not render the output consistently.

In this case, these add extra formatting in some browsers (i.e. Opera) that simply isn't used in others. In other words, tables display differently across browsers. The code as shown above works just fine - and consistently.

Frustrating, true.

But for those who want complex tables that work, the approach above works.
 

Footnote

That little table we started our article with - we did render it using DIV tables and CSS. Works consistently with IE, Firefox, Chrome, Opera, and Safari. We've posted this example, together with its source code, for those who are interested.
 

Copyright © 2017 Ars Informatica. All Rights Reserved.