CSS: styling an XML table

XML can contain a wide variety of data, including tabular data. Since XML has no predefined DTD which can tell a browser how such data must be presented, it's up to CSS to present it as a normal HTML table. In this post I'm going to show you how to write a CSS file for making an XML structure appear as an HTML table. First of all, we need an XML structure to work with, like the following:

      <data-header>Header 1</data-header>
      <data-header>Header 2</data-header>
      <data-header>Header 3</data-header>
    <!--more rows-->

We have several elements here:

  1. data: corresponds to table
  2. data-caption: corresponds to caption
  3. data-row: corresponds to tr
  4. data-header: corresponds to th
  5. data-cell: corresponds to td

Each element must have a well-defined role for its display property:

  1. table
  2. table-caption
  3. table-row
  4. table-cell
  5. table-cell

Now we can write our CSS styles:

data {
 display: table;
 width: 30em;
 border-collapse: collapse;
 border-spacing: 0;
 border: 2px solid gray;
 margin: 1em;
 table-layout: fixed;

data-caption {
 display: table-caption;
 text-align: center;
 font: 1.5em Georgia, serif;
 color: gray;
 padding-bottom: 4px;

data-row {
 display: table-row;

data-row:nth-child(odd) {
  background: #ffc;

data-header, data-cell {
 display: table-cell;
 padding: 0.3em;
 border: 1px solid gray;
 vertical-align: top;
 text-align: center;

data-header {
 font-weight: bold;
 background: gray;
 color: #fff;

Once set our display roles, the actual styling of an XML table is identical to its HTML counterpart. You can see the demo below.


Live demo

This entry was posted in , by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.