nicht angemeldet
Hallo,
mehrer Tabellen nacheinander, sieht aus wie eine Tabelle.
das ist das Hauptproblem.
Meine Tabell soll ohne irgendwelche Linien sein. Im IE 9, Safari 5 und Google Chrome wird die Tabelle so dargestellt, wie ich es möchte.
Glück.
Im Firefox sind hellblaue Linien.
Im Opera sieht es ganz furchtbar aus: Weiße Linien von oben nach unten und bei jeder Tabelle etwas verschoben.
Operas Darstellung ist in Ordnung, wenn auch von Dir nicht gewünscht.
Vereinfache Deinen Code und die Darstellung wird sich auf einfache Weise Deinen Vorstellungen anpassen lassen:
a) Deine Dozententabelle ist *eine* Tabelle, warum verwendest Du mehr als eine?
b) Warum besitzen diese Tabellen einen Rahmen, wenn Du doch gar keinen haben willst?
c) Warum ist die voreingestellte Schriftfarbe der gesamten Präsenz ein helles Grau, obwohl Du meistens eine weiße Schrift verwendest?
d) Skaliere mit einem Bildbearbeitungsprogramm wie IrfanView Deine Bilder auf die gewünschte Größe und belaste nicht den Browser damit.
Für mich sieht es so aus, als sei der Hauptgrund der, damit Du Sprungmarken zu den Bereichen wie Gesang, Klavier, ... setzen kannst. Dazu verwendest Du folgende Konstruktion:
<div><span style="color: #ffffff;"><a name="Akkordeon">
</a></span></div>
Da die Browser, die das id-Attribut nicht als Sprungmarke interpretieren, in freier Wildbahn seit Jahren ausgestorben sind, kannst Du diese Trennkonstruktionen ohne Funktionsverlust löschen und statt dessen einem geeigneten Element, z.B. einem tbody-Element, eine entsprechende id verpassen.
Deine erste "Tabelle" enthält die Spaltenüberschriften und jede Menge unnötiger HTML-Elemente und Inlinestyles:
<tbody>
<tr>
<td style="text-align: left;"><span style="color: #ffffff;"><strong>Portrait</strong></span></td>
<td style="text-align: left;"><span style="color: #ffffff;"><strong>Musikinstrument</strong></span></td>
<td style="text-align: left;"><span style="color: #ffffff;"><strong>Dozent</strong></span></td>
<td style="text-align: left;"><span style="color: #ffffff;"><strong>Hochschulabschluß</strong></span></td>
<td style="text-align: left;"><span style="color: #ffffff;"><strong>Universität</strong></span></td>
</tr>
</tbody>
Da es Kopfzeilen sind, verwendest Du besser das th-Element, packst die Zeile in ein thead-Element und formatierst den Inhalt über passendes CSS für das th-Element. Obiger Code vereinfacht sich (ohne CSS, dazu komme ich zum Schluss) zu:
<thead>
<tr>
<th>Portrait</th>
<th>Musikinstrument</th>
<th>Dozent</th>
<th>Hochuschulabschluß</th>
<th>Universität</th>
</tr>
</thead>
Ähnlich enthalten Deine weiteren Tabellenzellen alle ein unnötiges span-Element, das nur dafür da ist, die Schriftfarbe in der Tabelle auf weiß zu setzen. Ich vermute, das kommt vom Online-Editor. Entsorgen wir auch dieses und regeln die Darstellung per CSS:
<table id="dozentenliste">
<colgroup>
<col class="portrait" />
<col class="instrument" />
<col class="dozent" />
<col class="abschluss" />
<col class="hochschule" />
</colgroup>
<thead>
<tr>
<th>Portrait</th>
<th>Musikinstrument</th>
<th>Dozent</th>
<th>Hochuschulabschluß</th>
<th>Universität</th>
</tr>
</thead>
<[ref:self812;html/tabellen/aufbau.htm#kopf_koerper_fuss@title=tbody] id="Akkordeon">
<tr>
<td><img src="tl_files/Bilder/lehrer/example.jpg" alt="Max Mustermann" /></td>
<td>Akkordeon</td>
<td>Max Mustermann</td>
<td>Master of Music</td>
<td>Hochschule für Musik, Posen</td>
</tr>
</tbody>
<tbody id="Blockflöte">
<tr>
<td><img src="tl_files/Bilder/lehrer/example2.jpg" alt="Michaela Musterfrau" /></td>
<td>Blockflöte</td>
<td>Michaela Musterfrau</td>
<td>Dipl. Blockflötistin<br />Postgraduierten Dipl.</td>
<td>Universität der Künste, Berlin</td>
</tr>
</tbody>
<!-- und so weiter -->
</table>
Du solltest erkennen, dass das HTML wesentlich schlanker ist, als das derzeitige - ohne dass dadurch die Funktionalität eingeschränkt wird.
Da die Tabelle eine id erhalten hat, lässt sich darüber die Tabelle wunderbar formatieren, ohne dass andere Tabellen auf Deiner Seite davon betroffen sind. Damit die Browser die Tabelle schnell und einheitlich darstellen, empfehle ich Dir
table-layout: fixed;
Standard ist nämlich table-layout: auto; und die Spezifikation gibt den Browserherstellern bei diesem Algorithmus viel Freiheit, ich zitiere:
<zitat>
User agents may use any algorithm they wish to do so, and are free to
prefer rendering speed over precision, except when the "fixed layout
algorithm" is selected.
</zitat>
Das hast Du selbst erlebt ...
Nach meinen Tests solltest Du der Tabelle und den Spalten eine Breite verpassen und dafür sorgen, dass die Summe der Spaltenbreiten nicht kleiner ist als die Breite der Tabelle, siehe Archiv.
Mit folgendem CSS erhältst Du die von Dir gewünschte Darstellung:
table#dozentenliste {
[link:http://wiki.selfhtml.org/wiki/Referenzen:CSS/Eigenschaftenreferenz/Tabellenformatierung#Fixe.2Fvariable_Breiten@title=table-layout]:fixed;
[link:http://wiki.selfhtml.org/wiki/Referenzen:CSS/Eigenschaftenreferenz/Tabellenformatierung#Rahmenmodell@title=border-collapse]: collapse;
}
/*
Spaltenbreiten
*/
col.portrait {
width: 122px;
}
col.instrument {
width: 135px;
}
col.dozent {
width: 140px;
}
col.abschluss {
width: 155px;
}
col.hochschule {
width: 320px;
}
/*
Spaltenbeschriftungen:
- weiße Schrift
- linksbündig
- fett
- Rahmenfarbe: durchsichtig
(hat bei meinen Tests in Firefox, Opera Dein zweites Problem behoben)
*/
#dozentenliste th {
color: #FFF;
[link:http://wiki.selfhtml.org/wiki/Doku:CSS/Eigenschaften/Textausrichtung#text-align_.28horizontale_Ausrichtung.29@title=text-align]: left;
[link:http://wiki.selfhtml.org/wiki/Referenzen:CSS/Eigenschaftenreferenz/Schriftformatierung#Schriftgewicht@title=font-weight]: 600;
[link:http://wiki.selfhtml.org/wiki/Referenzen:CSS/Eigenschaftenreferenz/Rahmen#Rahmenfarbe@title=border-color]: transparent;
}
/*
Tabellenzellen in der Dozentenliste
- weiße Schrift
- Rahmenfarbe durchsichtig
Warum hast Du überhaupt Rahmen bei dieser Tabelle?
Du willst ja keine sehen :-)
*/
#dozentenliste td {
color: #FFF;
border-color: transparent;
}
Sieht doch gar nicht so schwer aus.
Freundliche Grüße
Vinzenz