Part III. Creating the Table

Creating the Table

In examining the Candidate questionnaire form, the table shown appears to be rather large, spreading out over several pages for a total of about 26 rows, 24 of which will hold the XML content. The first two are header rows. However, thanks to the magic of the XSLT stylesheet, this table will only need to be partially recreated. The reason for this is we will add an XSLT statement to one of the rows which will not only invoke the XML content for the rows, but in addition it will duplicate all the additional rows it needs at the same time. It does this through the use of the <xsl:for-each> statement which we will see in action later.

So for the moment we are only concerned with creating the two upper header rows and just one of the lower rows (see Figure 8, below) which includes the partially intercepted row holding the numbers.

Figure 8. The HTML table

After examining the table, we can see that it uses a combination of both the colspan and rowspan attributes to achieve the look it has. The easiest way to go about this is to first create the maximum number of columns and rows needed, then use colspan and rowspan attribute to merge them together.

Building the Table

1. Create a table with 3 rows and 6 columns. Again, don't worry about the additional rows. They will be added later.

 

2. Add a colspan attribute, value of "5" to the second data cell of the first row. This merges the last five columns.

 

3. Add a rowspan attribute, value of "2" to the first cell of the first row. This merges the first two rows.

 

4. Add height and width attributes to the first <td> tags in first and second rows to increase the height of the rows and compress the last five columns.

.	.
	.	.	.	.	.
.	.	.	.	.

 

5. Type the words Question and Score and align them to the bottom left using the attributes valign="bottom" and align="left". Add the numbers in the semi-merged second row as well. If you wish, replace the <td></td> tags for the text with table header tags <th></th> to give a heavier font appearance.

Question	Score
	1	2	3	4	5

6. Add cellpadding to the table of about "4" to force the text away from the table cell walls. You should now have a table that looks like this:

Question	Score
	1	2	3	4	5

Of the three rows, only the left data cell of the bottom row will be used to add the XSLT statement that calls up the content of the XML document. To see how this is done, go on to the next section, Part IV. Invoking the XML.