How to display XML data as a table using CSS?

Question

I have the below code. I want to link the XML code to a style sheet, and display the data in a table. I have linked to the style sheet but how do I display the XML data in a table?

<!DOCTYPE products SYSTEM "support.dtd">
<?xml-stylesheet href="style.css"?>

<products>
  <product>Widows XP</product>
  <product>Windows Vista</product>
  <product>Windows 7</product>
  <product>Windows Server 2003</product>
  <product>Windows Server 2008</product>
  <product>Debian Linux</product>
  <product>RedHat Linux</product>
  <product>VMware Virtulization</product>
  <product>Microsoft Hyper-V</product>
</products>

Jukka K. Korpela · Accepted Answer · 2012-02-01 06:28:07Z

6

To display the given data in a table, use

products { display: table; }
product { display: table-cell; }

This displays the data as a one-row table. To add borders around cells, for example, add

product { border: solid 1px; }

answered Feb 1, 2012 at 6:28

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Over a year ago

Thank you so much. One other question how would I add a title to the table and display them in a row so that each products is listed one after the other IE the table would dispaly the title OS followed by Windows XP Windows Vista Windows 7 and so on.

Jukka K. Korpela Over a year ago

If you need to add content, XSL might be a better tool, but for a simple static text, you can use generated content, e.g. products:before { display: table-cell; content: "OS"; font-weight: bold; border: solid 1px;}

Collectives™ on Stack Overflow

How to display XML data as a table using CSS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related