XForms/CSS tables

This is an example of using CSS to format a table without actually using the HTML table element. This is critical since some browsers do not support dynamic tabular layout. The Firefox 0.6 extension also does not support the repeat-nodeset attribute, so you can not yet display repeating data inside HTML tables.

The biggest drawback to this solution is that the width of the tables must be predefined in a stylesheet and can not adjust the width of the columns based on the width of the data in each row.

Program Image

Screen image of a pure CSS table

Program Example

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms"
 xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>Table with CSS and Divs</title>
      <style type="text/css">
* {
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
}
/* Example of doing layout of a table without using the HTML table tags */

.table { 
   display: table;
}

.tableHeader, .tableRow, .tableFooter  {
   display: table-row;
}

.leftHeaderCell, .leftCell, .leftFooterCell, 
.rightHeaderCell, .rightCell, .rightFooterCell
{
   display: table-cell;
}

.leftHeaderCell, .rightHeaderCell, .leftFooterCell {
    background-color: green;
    color: white;
    font-weight: bold;
	padding: 0 5px 0 10px;
}

.leftHeaderCell, .rightHeaderCell {
   text-align: center;
}

.leftCell {
   padding: 0 5px 0 10px;
}

.rightCell {
    text-align: right;
}

.rightFooterCell {
   text-align: right;
   border-top: solid black 2px; 
   font-weight: bold; 
}

/* Draw even rows with a light green */
.even {
	color: black;
   background-color: #CCFFCC;
}
</style>
   </head>
   <body>
      <p>Table with CSS and divs</p>
      <div class="table">
         <div class="tableHeader">
            <div class="leftHeaderCell">Description</div>
            <div class="rightHeaderCell">Value</div>
         </div>
         <div class="tableRow">
            <div class="leftCell">Item one</div>
            <div class="rightCell">$1,000.00</div>
         </div>
         <div class="tableRow even">
            <div class="leftCell">Item two</div>
            <div class="rightCell">$2,000.00</div>
         </div>
         <div class="tableRow">
            <div class="leftCell">Item three</div>
            <div class="rightCell">$3,000.00</div>
         </div>
         <div class="tableRow even">
            <div class="leftCell">Item four</div>
            <div class="rightCell">$4,000.00</div>
         </div>
         <div class="tableRow">
            <div class="leftCell">Item five has a long description</div>
            <div class="rightCell">$1,000.00</div>
         </div>
         <div class="tableFooter">
            <div class="leftFooterCell">Total: </div>
            <div class="rightFooterCell">$11,000.00</div>
         </div>
      </div>
   </body>
</html>

Next Page: Search flickr | Previous Page: Crime Profile
Home: XForms