Tabellarische Darstellung eine XML-Datei im Browser

[Onkel Dagobert]

Hallo,
ich "knacke" schon seit über einer Woche an einem Problem und komme einfach nicht weiter.
Hier mein Problem als vereinfachtes Beispiel:
Stellt euch vor, ich hätte ein Telefonbuch als XML-Datei in folgender Form:

<Telefonbuch>
    <Eintrag>
        <Name>Mueller</Name>
        <Vorname>Ernst</Vorname>
        <Telefon>012345</Telefon>
    </Eintrag>
    <Eintrag>
        <Name>Meier</Name>
        <Vorname>Hugo</Vorname>
        <Telefon>056789</Telefon>
    </Eintrag>
</Telefonbuch>

Ich suche nach einer einfachen Möglichkeit, diese Datei in einem Browser so darzustellen:

Müller Ernst 012345
Meier Hugo 056789

also jeder Telefonbucheintrag in eine Zeile und jedes Element eines Eintrags in einer Spalte untereinander.
Die Formatierung versuche ich möglichst einfach per CSS-Datei festzulegen, bekomme es aber beim besten Willen nicht hin.
Alle Kombinationen mit Display und Position führen dazu, das entweder alle Einträge in einer einzigen Zeile dargestellt werden, oder die einzelnen Elemente stehen nicht untereinander. Hat jemand eine Idee, wie das gehen könnte?

[Martin Honnen]

CSS kennt Werte für die "display"-Eigenschaft, um Elemente als Tabelle, Tabellenzeile, Tabellenzelle festzulegen:

Telefonbuch {
  display: table;
  margin: 1em;
}
Eintrag {
  display: table-row;
}
Eintrag * {
  display: table-cell;
  padding: 0 0.5em;
}

Margin und padding habe ich nur gesetzt, um eine lesbarere Darstellung zu erhalten, die Tabellendarstellung selbst wird durch die display-Werte definiert.

[Onkel Dagobert]

Vielen Dank für die schnelle Antwort.
Genau so hatte ich es bei einem meiner Versuche schon probiert, allerdings:
Alle Spalten werden nacheinander in der gleichen Zeile dargestellt. Der Umbruch findet also nicht nach dem letzen Element ( Telefonnummer ) sondern immer am rechten Rand des Browsers statt. Also etwa so:

Name1 Vorname1 012345 Name2 Vorname2
34567 Name3 Vorname3 67542 u.s.w.

Ich hatte mir allerdings vorgestellt, das alle Nachnamen, alle Vornamen und alle Nummern bündig untereinander stehen.
Außerdem sind die Spalten abhängig von der Länge des Inhalts unterschiedlich lang. Wenn man also das Browserfenster gerade so breit macht, das nur 3 Spalten in eine Zeile passen, stehen die Einträge trozdem nicht bündig untereinander.

[Martin Honnen]

Welchen Browser nutzt du? Mit allen gängigen Browsern außer alten IE-Versionen sollte das klappen, alles sicherlich mit Opera, Firefox, Chrome und neuen IE-Versionen. Ich hatte mein Beispiel auch mit Firefox 5, Opera 11.5 und IE 9 getestet.
So du also nicht gerade eine alte IE Version wie IE 6 verwendest, wundert mich, das es bei dir nicht geklappt haben soll.

[Onkel Dagobert]

Tabellarische Darstellung einer XML-Datei im Browser

Probiert habe ich es mit dem IE in der Firma ( kann jetzt nicht sagen, welche Version, aber die Neuste ist es bestimmt nicht. Wir hinken immer ein bischen hinterher, bis die IT-Abt. etwas freigibt).
Zuhause benutze ich Firefox 5 und Linux. Damit habe ich es gerade ausprobiert und da geht es.
Wenn ich die gleiche Struktur mit Standard-HTML-Code herstelle (<Table> statt <Eintrag>, <Tr> und <Td> dann funktioniert es auf dem IE. Nur eben mit XML nicht.
Ich beschäftige mich noch nicht so lange mit XML aber mittlerweile bin ich doch sehr erschrocken, wie wenig eigentlich so funktioniert, wie es soll und wie viele Inkompatibilitäten es unter den Browsern gibt.
Das macht die ganze XML- und HTML-Geschichte eigentlich unbrauchbar.

[Martin Honnen]

XML mit CSS zu "stylen", ist sicherlich mit älteren IE-Versionen kein brauchbarer Ansatz, dafür reicht die CSS-Unterstützung nicht. Selbst wenn du mit den älteren Versionen HTML und CSS benutzt, also etwa "div" und "span"-Elemente, und dann CSS mit display: table/table-row/table-cell, wird das nicht den gewünschten Effekt erreichen. Laut http://msdn.microsoft.com/en-us/libr...=VS.85%29.aspx sind diese display-Werte erst seit IE 8 implementiert.

[Onkel Dagobert]

Tabellarische Darstellung einer XML-Datei im Browser

Ursprünglich hatte ich auch einen ganz anderen Ansatz ohne Tabellen:
Ich wollte eigentlich für die Tags Name und Vorname den Display-Style Inline verwenden, und für das Tag Telefonnummer den Style Block. Ich hatte gehofft, der Browser würde daraufhin nur nach der Telefonnummer einen Zeilenumbruch einfügen.
Danach wollte ich mit dem Style Left: für jedes Tag eine Startposition angeben und somit hätte ich meine tabellenartige Darstellung. Aber das funktioniert auch nicht.

[Thomas Meinike]

Mit XML + CSS stößt man noch immer schnell an Grenzen. Verwende alternativ XSLT zur Transformation nach (X)HTML mit integriertem CSS, siehe nachfolgendes Stylesheet telefonbuch.xsl. Im Browser lässt sich die Transformation durch Einbindung der rot markierten Verarbeitungsanweisung anstoßen (alternative Verarbeitung mit einem Standalone-Prozessor wie z. B. AltovaXML, Saxon oder serverseitig via PHP usw.):

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="telefonbuch.xsl" type="text/xsl"?>
<Telefonbuch>
  <!-- ... -->
</Telefonbuch>

telefonbuch.xsl:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">

  <xsl:output method="xml" encoding="UTF-8" indent="yes"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

  <xsl:template match="/">
    <html lang="de" xml:lang="de">
      <head>
        <title>Telefonbuch</title>
        <style type="text/css">
          table,th,td,tr { border-collapse: collapse; border: 1px solid #000; padding: 0.5em; }
        </style>
      </head>
      <body>
        <h1>Telefonbuch</h1>
        <xsl:apply-templates select="Telefonbuch"/>      
      </body>
    </html>  
  </xsl:template>

  <xsl:template match="Telefonbuch">
    <table>
      <thead>
        <tr>
          <th>Name</th><th>Vorname</th><th>Telefon</th>
        </tr>
      </thead>
      <tbody>
        <xsl:apply-templates select="Eintrag"/>  
      </tbody>
    </table>
  </xsl:template>

  <xsl:template match="Eintrag">
    <tr>
      <td><xsl:value-of select="Name"/></td>
      <td><xsl:value-of select="Vorname"/></td>
      <td><xsl:value-of select="Telefon"/></td>
    </tr>
  </xsl:template>

</xsl:stylesheet>

[Onkel Dagobert]

Ich hatte vergessen zu erwähnen, das das Telefonbuch nur ein einfaches Beispiel für ein etwas komplexeres XML-Projekt ist. Ich wollte mit dem vereinfachten Beispiel Telefonbuch nur das wesentliche Problem erklären.
Außerdem habe ich nicht erwähnt, daß das Projekt für meinen Arbeitgeber ist und unsere IT-Abteilung alles das, was im Internet Spaß macht (und wohl auch gefährlich ist) abgeschaltet hat. So wird z.B. die Verarbeitung von Programmen ( z.B. Java-Scripts) im Web-Browser nicht zugelassen.
Ich habe das Problem aber mittlerweile doch mit CSS und ohne Tabellen lösen können.
Jetzt habe ich nur noch einen kleinen Schönheitsfehlerbzw. meine Lösung, ich habe viele große Schönheitsfehler )

Alle Elemente, die in einer Zeile stehen sollen, sind mit dem Attribut display:inline versehen und werden somit in einer Zeile nebeneinander dargestellt. Das letzte Element ( in meinem Beispiel die Telefonnummer) hat das Attribut display:block und erzeugt somit als letztes Element in der Zeile den Zeilenvorschub. Wenn das letzte Element allerdings fehlt ( komplett mit den Tags <telefon>12345</telefon>) oder wenn die Tags zwar da sind, aber keinen Text beinhalten, dann erfolgt kein Zeilenvorschub.

Es wäre schön, wenn es einen "der letzte macht die Tür zu"-Selektor gäbe, also wenn man das letzte Kind-Element von <Eintrag> mit dem Attribut display:block versehen könnte.
Es gibt zwar den Selektor :last-child , aber der funktioniert irgendwie nicht.
Irgendwie verstehe ich die Dokus im Web zu diesem Selektor auch nicht, denn beschrieben ist es in dieser Form : Child:last-child was ich als letztes Kind vom Kind verstehe. Richtiger wäre doch Parent:last-child.
Also im Bezug auf mein Telefonbuch wäre nach meiner Meinung eigentlich richtig:

Eintrag:last-child{
display:block;}

Und nicht wie beschrieben:

Telefon:last-child{
display:block;}