Padde: 1. Tabellenzelle zentriert, 2. linksbündig - Klasse notwendig?

Hallo zusammen.

Ich hab jeweils zwei Tabellenzellen nebeneinander. In der ersten befindet sich ein Bild, in der zweiten die Beschreibung.

Wie kann ich die Bilder in der ersten <td> zentrieren, während die Texte in der zweiten <td> weiterhin linksbündig bleiben? Muss ich dazu für die jeweils erste Tabellenzelle eine Klasse vergeben?

Hier noch mal der Code:

<table>
<tr>
<td>IMG</td><td>Text</td>
</tr>
.
.
.
ca. 20 Wiederholungen

Gruß
Padde

  1. Hi,

    Wie kann ich die Bilder in der ersten <td> zentrieren, während die Texte in der zweiten <td> weiterhin linksbündig bleiben? Muss ich dazu für die jeweils erste Tabellenzelle eine Klasse vergeben?

    nein. Es gibt z.B. die Pseudoklasse ":first-child" sowie den Direct Adjacent Sibling Selector "+". Überlege Dir darüber hinaus, ob Du eine Spalte so betrachten kannst, dass sie die Zeile benennt - diese Spalte kann mit <th> anstatt <td> ausgezeichnet werden.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
  2. Wie kann ich die Bilder in der ersten <td> zentrieren, während die Texte in der zweiten <td> weiterhin linksbündig bleiben? Muss ich dazu für die jeweils erste Tabellenzelle eine Klasse vergeben?

    Die last-child- oder nth-child()-Pseduoklasse reicht hierzu schon aus.

    Hier noch mal der Code:

    <table>
    <tr>
    <td>IMG</td><td>Text</td>
    </tr>
    .
    .
    .
    ca. 20 Wiederholungen

    Es ist also eine Liste an Bildern - die Bilder haben jeweils eine Beschreibung:

    <ul>  
      <li>  
        <figure>  
          <img src="/foo.png" />  
          <figcaption>Caption</figcaption>  
        </figure>  
      </li>  
      <!-- ca. 20 Wiederholungen -->  
    </ul>
    
    1. Hi.

      Es ist also eine Liste an Bildern - die Bilder haben jeweils eine Beschreibung:

      Tabellen stellen auch Daten in Listenform dar (z.B. Liste von Datensätzen) und trotzdem nehme ich für tabellarische Daten keine Listen sondern Tabellen.

      Wie würdest Du denn den Tabellenkopf in Deiner Liste abbilden?

      Grüße

      • Steffen
      1. Tabellen stellen auch Daten in Listenform dar (z.B. Liste von Datensätzen)

        Nein - zwischen Tabellen und Listen besteht ein signifikatner Unterschied: die Inhalte von Tabelle sind in Matrizen hinterlegt. Matrizen lassen sich transformieren ohne die Sinnhaftigkeit der Daten zu beschädigen.

        Eine Liste hingegen ist eine sequentielle Abfolge oder eine Gruppe von gleichartigen Elementen die ihrerseits wiederum mehrere Dimensionen besitzen können. Der Informationsgehalt der liste leidet allerdings, wenn man sie in einer Tabelle darstellt und die Dimensionen verstauscht.

        und trotzdem nehme ich für tabellarische Daten keine Listen sondern Tabellen.

        So soll es auch sein.

        Wie würdest Du denn den Tabellenkopf in Deiner Liste abbilden?

        Ich sehe in der Tabelle keinen Tabellenkopf.

        Es kommt auf die Art der Daten an - über das gibt der OP zu wenig auskunft - es ist allerdings davon auszugehen, das es sich hier um eine Bildergalerie (eine Liste an Bildern) handelt und nicht um eine Bilddatenbank die tatsächlich in Tabellenform sinnvoller abgehandelt werden könnte.

        Als Faustregel gilt:

        Wenn deine Daten noch halbwegs sinnvoll aussehen, wenn man die x- und y-Achse vertauscht, ist es eine Tabelle - wenn dir aber spontan ein "WTF" in den Sinn kommt, dann ist es keine Tabelle.

        1. Hallo,

          Als Faustregel gilt:
          Wenn deine Daten noch halbwegs sinnvoll aussehen, wenn man die x- und y-Achse vertauscht, ist es eine Tabelle - wenn dir aber spontan ein "WTF" in den Sinn kommt, dann ist es keine Tabelle.

          Hm die Faustregel kommt mir komisch vor, Ich kann es vertauschen wie ich will, es sieht immer gut aus ;)

          +------+   +------+   +------+   +------+   +------+
          |      |   |      |   |      |   |      |   |      |
          |      |   |      |   |      |   |      |   |      |
          +------+   +------+   +------+   +------+   +------+
            text       text       text       text       text

          +------+
          |      |   text
          |      |
          +------+

          +------+
          |      |   text
          |      |
          +------+

          +------+
          |      |   text
          |      |
          +------+

          +------+
          |      |   text
          |      |
          +------+

          +------+
          |      |   text
          |      |
          +------+

          Jeena

          1. Hm die Faustregel kommt mir komisch vor, Ich kann es vertauschen wie ich will, es sieht immer gut aus ;)

            Denk dir um das Bild und um den Text ein imaginäres Kasterl, welches beide zu einer untrennbaren Einheit verbindet - da gibts dann keine Dimensionen mehr die du vertauscht. Was du hier änderst, ist das Erscheinungsbild :)

            Mit "vertauschen" meine ich aber das imaginäre vertauschen der Datenachsen, ohne das Erscheinungsbild tatsächlich zu verändern. Ob der Beschreibungstext rechts, links oben oder unten dargestellt wird - visuell - darf in diesem fall keinen Eingriff mehr ins Markup bedeuten.

            Anders (und mit sehr viel Hinkebein): wenn die Darstellung selbst ein "Teil der Daten" (also wenn Datenfelder in beziehung zueinander stehen) ist, ist es eine Tabelle. Wenn das nicht der Fall ist, ist es eine Liste.

            Im Fall einer Bildergalerie (Liste) wäre es so absolut kein Problem, da die Darstellung nicht ans Markup gebunden ist - wenn du bei einer Tabelle die Darstellung so verändern kannst, wie unten gezeigt und dabei die Matrix nicht zerstörst, sind es keine tabellarischen Daten.

            +---+
            |   |  text
            +---+

            +---+
            text  |   |
                  +---+

            +---+
            |   |  text
            +---+

            +---+
            text  |   |
                  +---+

            +---+
            |   |  text
            +---+

            +---+
            text  |   |
                  +---+

      2. Hi.

        Es ist also eine Liste an Bildern - die Bilder haben jeweils eine Beschreibung:

        Tabellen stellen auch Daten in Listenform dar (z.B. Liste von Datensätzen) und trotzdem nehme ich für tabellarische Daten keine Listen sondern Tabellen.

        Wie würdest Du denn den Tabellenkopf in Deiner Liste abbilden?

        Grüße

        • Steffen

        Hallo.

        Das ist für mich überhaupt die Frage, was nehme ich? Listen, Tabellen oder Floats?

        Bei der Seite geht es darum eine „Logowüste“ bzw. „Referenzen“ ansehlicher zu machen. Vorher waren die Logos (ohne Beschreibung) in einem <div> verpackt und das ganze dann nach rechts gefloatet.

        Als Überschrift käme vielleicht „Unsere Referenzen“ in Frage.

        Aber richtige Daten sind es eigentlich nicht, die in der Tabelle stehen.

        Was denkt Ihr?

        1. Das ist für mich überhaupt die Frage, was nehme ich? Listen, Tabellen oder Floats?

          float ist eine CSS-Sache und interessiert dich jetzt mal prinzipiell nicht - Tabellen oder Listen ist die Sache die es zu klären gilt.

          Bei der Seite geht es darum eine „Logowüste“ bzw. „Referenzen“ ansehlicher zu machen. Vorher waren die Logos (ohne Beschreibung) in einem <div> verpackt und das ganze dann nach rechts gefloatet.

          Als Überschrift käme vielleicht „Unsere Referenzen“ in Frage.

          Aber richtige Daten sind es eigentlich nicht, die in der Tabelle stehen.

          Was denkt Ihr?

          Es ist eindeutig eine Liste und keine Tabelle.

          Mein ursprünglicher Vorschlag - sofern du denn HTML5 verwenden willst - ist da also immer noch anwendbar.

          Wenn du auf XHTML 1.0 oder ähnliches setzen willst, dann lässt du figure und figcaption weg und ersetzt sie durch ein div-Element mit der Klasse "figure" um Bild und Beschreibung zu gruppieren und das figcaption ersetzt du z.B. durch ein span- oder p-Element mit der Klasse figcaption oder ähnliches.