Reformatting HTML Tables and Adding Page Elements

Fortunately, you don't need to master XSL/XSLT and XPath to improve the formatting of the default table style. Basic knowledge of HTML is all you need to change the table design and add other elements to the page.

Note

You might find it simpler to create Access reports with a design that emulates an HTML table, and save the report design as XML. Working with XSLT-generated HTML tables, however, lets you apply your HTML authoring skills to create custom pages that comply with specific Web site design standards. You also can apply the techniques you learn in the following two sections to the much more complex .xsl files of exported Access reports.

Applying STYLE to Table and Text Elements

If you have an organization-wide style for displaying tabular information such as phone directories and other data that's suited to a simple list you can conform the design of exported tables and queries by altering the HTML code of the ObjectName.xsl stylesheet.

To change the title, font, border, and background color of the table header and rows in the style sheet, using vwUnion.xsl as an example, do this:

1. Make a backup copy of ObjectName.xsl in case you run into problems you can't fix easily.

2. Open ObjectName.xsl in Notepad, and change the text between the <title>...</title> tags to a more descriptive name Customers and Suppliers by Country and City for this example.

3. Add the following lines after the <style type="text/css"></style> line to specify Verdana or Arial font with a height of 12 pixels, set medium gray as the background color for the table header, and specify light gray for the table rows:

    <style>TH, TR, P { font-family: verdana, arial; font-size: 12px } </style> <style>TH { background-color: #CCCCCC } </style> <style>TR { background-color: #EEEEEE } </style> 

4. Save the .xsl file, open ObjectName.htm in IE 5+ to test your changes, and then close the .htm file.

   Tip

   Clicking IE's Refresh button doesn't regenerate the HTML. You must close and reopen the page because the <SCRIPT event=onload for=window> event handler of the .htm file executes only when you load the file.

5. To specify a small transparent border around each table cell and increase the height of the rows, including the header, change the <table border=... line to:

    <table border="0" bgcolor="#ffffff" cellspacing="2" cellpadding="2" font-weight:normal" value="6">
   Repeat step 4 to check your HTML syntax.
    
   Figure 23.8 illustrates the effect of the preceding changes.
     
   Figure 23.8. Adding a few styles and changing HTML border attributes modernizes the table's appearance.
    
    
     

6. To prevent accidentally overwriting your changes when updating the XML data document, save the .xsl files with a new name CityList.xsl for this example.

   Tip

   Select All Files in Notepad's Save As Type list and UTF-8 in the Encoding list when saving XSL, HTML, and XML files. When saving changes with Ctrl+S, you don't need to alter the Save As Type and Encoding selections.

7. Open the .htm file in Notepad, and change the file name argument value in the LoadDOM objStyle, "vwUnion.xsl" line to CityList.xsl.

8. Save the edited .htm file with a different name CityList.htm for this example so you don't accidentally overwrite it.

9. Open the new .htm file in IE 6+ to verify the changes you made to the .htm script.

Note

HTML is very forgiving of some coding errors, such as inverting the sequence of closing tags, but XLST isn't. Missing HTML tags or failure to add closing tags in the correct sequence in XSLT causes IE 5+ to display an error message.

Adding a Table Header and Introductory Text

Adding elements to the style sheet is even easier than modifying existing elements. For example, to add a full-width table caption above the field names and a couple of lines of text to the page, do this:

1. Reopen the .xsl file CityList.xsl for this example in Notepad.

2. Insert the following three lines below the <tbody> line (before the first <tr> element) to add the full-width table header.

    <tr> <th colspan="5">Northwind Customers and Suppliers by Country and City</th> </tr> 

3. Insert the following two lines after the <body link="#0000ff" vlink="#800080"> line:

    <P align="center"><B>Northwind Traders - Confidential - For Internal Use Only</B></P> <P align="center">This list is updated every weekday at 2:00 a.m.</P> 

4. Save the .xsl file, and reopen the .htm file to check you work (see Figure 23.9).

Figure 23.9. Only a few additional lines of HTML code in the .xsl file add the title text and full-width header line shown here.