Komplexes Konstrukt vereinfachen

[Rolf B]

Hallo Jenny,

• definiere fürchterlich
• definiere die Semantik der Seite, davon hängt vieles ab.

Bisher ist das eine Tabelle mit 2 Spalten und die Spalten enthalten je ein Bild mit data-URL als Quelle.

Hauptfrage wäre: Was ist der Zweck der Tabelle? Kommen da tabellarische Daten 'rein? D.h.: muss das eine Tabelle bleiben oder kann es etwas anderes sein? Bei echt tabellarischen Daten wäre es sinnvoll, einen thead-Bereich mit th Elementen als Spaltenüberschriften vorzusehen.

Zweite Frage: Was ist mit den Bildern?

• Ist es der Demo geschuldet oder ist es auch später so, dass die Bilder in den beiden Spalten identisch sind?

• Sind die Bilder auch in der realen Seite Flaggen oder ist das nur die Demo? Wenn real: Welchen Zweck erfüllen die Flaggen? Sprachauswahl oder Sprachbezeichnung? Das wäre dann falsch, Flaggen symbolisieren Staaten, keine Sprachen.

• Haben die Bilder inhaltliche Bedeutung oder sind sie Dekoration?

  • Bei inhaltlicher Bedeutung brauchen sie eine aussagekräftige alt-Angabe. alt="cross" für beide Bilder stelle ich mir nicht als aussagekräftig vor.
  • Dekoration hingegen kann man mit alt="" oder als CSS Hintergrundbild realisieren. Bei CSS wäre dann auch data-URL aus dem HTML raus. Und wenn es dann nicht nur 2 Bilder, sondern viele kleine, aber gleich (oder ähnlich) große Bilder sind, kann sich ein externes Bild mit Sprites anbieten.

Sorry für den Fragenkatalog, aber die Frage lässt sich nicht allgemein beantworten. Oder ich müsste alle Alternativen durchdeklinieren, und dann reichen die 5000 Zeichen pro Posting nicht.

Einen Hinweis zum Thema "fürchterlich" hätte ich noch: Klassen sollen nicht die technische Funktion beschreiben, die man damit erreichen will. Bei CSS-Frameworks ist das so, ja, aber bei eigenen Klassen mit eigenen CSS Regeln sollen die Klassen die Fachlichkeit beschreiben. Mal angenommen, das wäre eine Vokabelliste. In dem Fall sollte die Tabelle class="vokabeln" haben. Die Spalten brauchen nicht unbedingt eigene Klassen, hierfür kann man auch mit Kombinatoren arbeiten:

<table class="vokabeln">
  <colgroup>
    <col />
    <col />
  </colgroup>
  <thead>
    <th>Lateinisch</th>
    <th>Grammatik</th>
    <th>Deutsch</th>
  </thead>
  <tbody>
    <tr>
      <td>laudāre</td>
      <td>A-Konjugation (laudō, laudāvī, laudātum)</td>
      <td>loben</td>
  </tbody>
</table>

.vokabeln {
   width: 100%;
}

.vokabeln col {
   width: 50%;
} 
.vokabeln td {
  text-align: center;
} 

Warum colgroup und keine Spaltenbreiten für die td Elemente? NORMALERWEISE ist das egal. Aber falls Du td Elemente mit colspan hast, dann wird das Festlegen von Breiten über die td Elemente schwierig. Deswegen ist es besser, für jede Spalte ein col-Element vorzusehen und für diese Spaltenbreiten zu geben. Generell ist es auch nicht sinnvoll, die Spaltenbreite einer Tabelle zu rigide festzulegen. Für col bedeutet width eine Minimalbreite, und je nach Tabelleninhalt kann es dem Browser helfen, wenn die Spalten etwas „atmen“ können.

th braucht man nicht zu zentrieren, das ist eh schon der Fall. Aber wenn Du sicher gehen willst, dann verwende .vokabeln :is(th, td) als Selektor. Heißt: Suche in den direkten oder indirekten Kindelementen der Elemente mit Klasse vokabeln nach th- oder td-Elementen (dieses "oder" wird durch :is() gebildet).

Beachte: Wenn du keine tabellarischen Daten anzeigst, ist table das falsche Element, dann reden wir eher über ein Grid.

Rolf