Tabelle mit Links

[Jörg Reinholz]

Moin!

Auf jeden Fall nicht mit table.

Nr. | Abk.    | Name der Partei
---------------------------------------------------------
1   | CDU     | "Christlich demokratische" Union
2   | SPD     | "Sozialdemokratische" Partei Deutschlands
…

Soso … Ich werde mich hüten hier eine Vorschrift zu machen.

Zur Frage:

Links über eine Tabellen-Zeile sind so

<a href="#foo"><tr><td>…</td>…</tr></a>

oder so

<tr><a href="#foo"><td>…</td>…</a></tr>

nicht zulässig. Deshalb habe ich das nicht als HTML markiert.

Aber das Problem ist lösbar.

1. Ansatz: Lösung als Tabelle

<table id='Foobars'>
  <thead>
     …
  </thead>
  <tr>
    <td><a href="#foo">1</a></td>
    <td><a href="#foo">FOO</a></td>
    <td><a href="#foo">FOO ist nicht BAR</a></td>
  </tr>
</table>

ist erlaubt.

Jetzt kann man mit CSS hingehen und das Aussehen bestimmen:

#Foobars {
   // Tabelle insgesamt
}

#Foobars tr {

}

#Foobars tr:hover {
   // wie soll die Zeile aussehen, wenn die Maus darüber ist?
}

#Foobars tr td:nth-child(1) {
  width:3em;
  // weitere für erste Spalte (erstes Element des Elternelements, hier tr, also das mit der Nr.
}
#Foobars tr td:nth-child(2) {
  width:6em;
  // weitere für zweite Spalte
}
#Foobars tr td:nth-child(3) {
  width:20em;
  // weitere für dritte Spalte
}

#Foobars tr td {
   // Abstände, Innenabstände und Rahmen weg:
   margin:0;
   padding:0;
   border:0   
}

#Foobars tr td a {
  // Anzeige als Blockelement:
  display: block;
  height:100%;
  width: 100%;
  // ... padding, ...
}

Nachteil: Man muss sich mit Javascript um jene kümmern, die mit der Tastatur navigieren, das CSS das Elternelement nicht adressieren kann, also nicht die Zeile adressieren kann, welche ein Element enthält, welches den Focus bekommt bzw, verliert.

Deshalb 2. Ansatz mit Liste:

<ol id="foobars">
 <li>
   <a href="#foo">
     <span class="abk">FOO</span>
     <span class="vollname">FOO ist nicht BAR</span>
   </a>
 </li>
</ol>

Mit ein wenig CSS, z.B.

#foobars li a span {
   display:inline-block;
}

#foobars li a span:nth-child(1) {
// oder #foobars li a span.abk
   // Abkürzung
   width: 6em;
}
#foobars li a span:nth-child(2) {
// oder oder #foobars li a span.vollname
   // Name
   width: 20em;
}

kann man das dann so formatieren, dass alles hübsch tabelliert ausssieht. Die Nummmer liefert die Liste und die Hover-Effekte kann man klassisch für den Link festlegen. Vorteil ist, dass die Navigation mit der Tastatur schlüssiger bleibt.

Jörg Reinholz