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:
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.
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} |