Xml and Tables

At the start of this chapter, we showed the various parts of a table in HTML. The same parts can occur in an XML-based format, but in that case, the browser probably has no built-in knowledge about which XML element corresponds to which part of the table. To help with that, the display property has keywords for each of the parts. The keywords are as follows:

• table (corresponding to TABLE in HTML) Specifies that an element defines a block-level table.

• inline-table (doesn't exist in HTML) Like table, but the table doesn't start on a new line. Instead, it is placed inline.

• table-row (in HTML: TR) Specifies that an element is a row of cells.

• table-row-group (in HTML: TBODY) Specifies that an element groups one or more rows.

• table-header-group (in HTML: THEAD) Like table-row-group, but wherever it occurs in the table, it is always displayed before all other rows and rowgroups (but after any captions). On printed pages, the header group is often repeated on each page, in case the table is too long for one page.

• table-footer-group (in HTML: TFOOT) Like table-row-group, but it is always displayed after all other rows and rowgroups (but before captions). Like table-header-group, this element is often repeated at the bottom of all pages if a long table is printed.

• table-column (in HTML: COL) Specifies that an element describes a column of cells. Column elements cannot have content, but they may be useful for setting column widths, borders, and backgrounds.

• table-column-group (in HTML: COLGROUP) Specifies that an element groups one or more columns.

• table-cell (in HTML: TD, TH) Specifies that an element represents a table cell.

• table-caption (in HTML: CAPTION) Specifies a caption for the table.

For example, if some document contained markup similar to this:

 <timetable>   <title>     Airport bus time table     <from>Black Lake Hotel</from>     <to>Pine International Airport</to>   </title>   <fields>     <bus>Bus no.</bus>     <dep>Departure time</dep>     <tim>Journey time</tim>     <ar2>Arrival terminal 2</ar2>     <ar1>Arrival terminal 1</ar1>   </fields>   <rec>     <bus>501</bus>     <dep>06:25</dep>     <tim>85 min.</tim>     <ar2>07:50</ar2>     <ar1>08:00</ar1>   </rec>   <rec>     <bus>301</bus>     <dep>06:50</dep>     <tim>140 min.</tim>     <ar2>09:10</ar2>     <ar1>09:20</ar1>   </rec> ...   <rec>     <bus>515</bus>     <dep>17:55</dep>     <tim>115 min.</tim>     <ar2>19:50</ar2>     <ar1>20:00</ar1>   </rec>  </timetable> 

A good way to present this information is in tabular form. The <timetable> element becomes a table, <field> is a heading row, <rec> is a normal row, and so on. A skeleton of a style sheet could be as follows:

 timetable {display: table} fields {display: table-header-group} rec {display: table-row} bus, dep, tim, ar2, ar1 {display: table-cell} title {display: table-caption} 

This is enough to display the data in tabular form. We flesh out the skeleton next with some padding and other style properties to make it look better, but let's first take a look at why this works. If you look closely, you can see that not all the parts of a table are present. For example, <fields> has been made a table-header-group (corresponding to the THEAD in HTML), and its children are table-cell (like TH/TD in HTML), but there is no row element to contain those cells.

The table model of CSS allows many elements to be omitted. Where necessary, they are automatically inserted. In the previous style sheet, the table-row that must enclose the children of <fields> is automatically inserted between the <fields> element and its children. It is created as a so-called anonymous box, which means it has no corresponding element in the source document and no name; hence, you cannot set properties on it. You can tell its presence indirectly because the cells are correctly lined up in a row, but you cannot make the row box itself visible.

Let's add a few more properties to make the table easier to read: some horizontal rules, padding, and so on. Figure 17.9 shows the result.

Figure 17.9. XML table example.

Airport bus time table Black Lake Hotel - Pine International Airport
Bus no.	Departure time	Journey time	Arrival terminal 2	Arrival terminal 1
501	06:25	85 min.	07:50	08:00
301	06:50	140 min.	09:10	09:20
515	17:55	115 min.	19:50	20:00

 title {font-style: italic} fields {font-weight: bold;   border-bottom: medium solid} rec {border-bottom: thin solid black} bus, dep, tim, ar2, ar1 {padding: 0.5em} to:before {content: " - "} 

Because CSS automatically inserts missing elements in a table, it is sometimes possible to use the table layout for something that, at first sight, doesn't look like a table at all. For example, the following (hypothetical) markup could be rendered as a table (see Figure 17.10):

 <scene-list>   <scene><name>Opening scene</name>     <item>Camera 1 left</item>     <item>Camera 2 on rails</item>     <item>Camera 3 close-up</item>   </scene>   <scene><name>Balcony scene</name>     <item>Camera 1 left</item>     <item>Camera 2 close-up</item>   </scene> </scene-list> 

Figure 17.10. A table created from a list.

We can align the cameras in columns:

 scene-list {display: table; border-collapse: collapse} scene {display: table-row} name, item {display: table-cell;   border: thin solid; padding: 0.5em} name {font-weight: bolder}