Zweite Tabellenspalte soll eine andere Schriftfarbe bekommen

[Larissa13]

Hallo,
Ich habe eine HTML Tabelle erstellt und würde gerne die Schriftfarbe der ersten Spalte ändern. Die Tabelle hat nur zwei Spalten.
Der ganzen Tabelle ist die CSS class="table" zugewiesen. Das ist auch gut so, allerdings soll lediglich die Schriftfarbe in der ersten Spalte geändert werden.

Ich finde es fast schon logisch das es so nicht klappen kann. Aber wie kann ich in beiden Spalten die Daten aus der class="table" haben und gleichzeitig in beiden Spalten eine andere Schriftfarbe?

Ich hoffe, ihr versteht was ich meine und könnt mir helfen.



<table width="480px" height="160px" align="center" border="2" bordercolor="#6E6E6E" bgcolor="#CCCCCC" class="table">
<tr>
<td width="240px" height="160px" aglin="right" background="bilder/bildname.png">
<div style="height:100px; width:180px; overflow:auto; left:45px; top:10px; position:relative;">
<p align="right">
erste Spalte (Schriftfarbe ist grau und soll weiss werden)
</td></p></div>
<td><b>Text:</b><br>
zweite Spalte (Schriftfarbe ist grau)
</td>
</tr>
</table>

 

[Lenchen]

Um ehrlich zu sein steig ich bei deinem Quelltext nicht ganz durch.
Versuch mal folgendes: geb den td's, die eine andere Farbe haben eine class="white" und weise ihnen die Schriftfarbe weiß zu

 

[Junny]

Zunächst einmal solltest Du Dich von sämtlichen Farbangaben etc. im HTML-Quelltext trennen. HTML zeichnet ausschließlich den Inhalt aus, CSS dient zur Angabe des gewünschten Aussehens. Verwende am besten XHTML 1.0 Strict, da bei diesem Doctype solche Angaben beim Validieren als Fehler angekreidet werden. Die Einzige Ausnahme bilden width- und height-Angaben bei Bildern, die dann aber in Pixeln und ohne Angabe der Einheit zu schreiben sind.

Wenn Du das verstanden hast, wende Dich Deinem konkreten Problem zu: Die Frage sollte sein, warum die beiden Spalten unterschiedliche Schriftfarben haben sollten. Wenn es dafür einen inhaltlichen Grund gibt (z.B. das Linke ist eine Art Überschrift für das Rechte), dann zeichne den Inhalt besser mit HTML aus. Dann fällt Dir automatisch die Formatierung per CSS einfacher.
Wenn Du mir verrätst, worum es da geht, gebe ich Dir einen konkreten Lösungsvorschlag.

Gruß
Junny

edit: Lenchen, Dein Tipp hilft Larissa13 nicht im Geringsten! Damit ist das Problem zwar scheinbar gelöst, aber die Arbeitsweise ist abgrundtief schlecht und es kommen immer wieder ähnliche Probleme auf sie(?) zu, die ähnlich umständlich gelöst werden.

 

[Larissa13]

Lenchen
Wenn er unverständlich und der Code nicht korrekt ist, tut es mir leid. Ich verstehe zwar schon einiges, bin aber noch weit vom "Profi" entfernt.
Das habe ich schon probiert, hat allerdings nicht funktioniert. (Wenn ich deinen Beitrag richtig verstanden habe).

Junny
Das mache ich normalerweise auch. Die vorherigen Tabellen (Habe noch mehr erstellt) sehen allerdings ganz anders aus. Da ich Probleme mit den anderen Tabellen vermeiden wollte, habe ich das in dieser Tabelle so belassen - wird aber noch geändert.

Die erste Spalte
Hat ein braunes Hintergrundbild auf dem etwas stehen soll.

Die zweite Spalte
Hat eine hellgraue Hintergrundfarbe und eine dunkelgraue Schrift

Wenn ich den Code so belasse, sieht die Tabelle zwar so aus - wie ich sie haben möchte - allerdings kann man die dunkelgraue Schrift auf dem braunen Hintergrund schwer lesen. Grund genug?

 

[Junny]

Wenn ich Dich richtig verstanden habe, sind die beiden Spalten völlig gleichberechtigt und der einzige Grund für andere Schriftfarben ist das Design.
Dann empfehle ich Dir, das Problem so zu lösen (ähnlich wie Lenchen):
Gib jeder ersten Tabellenzelle einer Zeile eine andere Klasse (z.B. first-child).
Beispiel:

<table>
  <tr>
    <td class="first-child">...</td>
    <td>...</td>
  </tr>
  <tr>
    <td class="first-child">...</td>
    <td>...</td>
  </tr>
</table>

Jetzt kannst Du die erste Tabellenspalte mit CSS selektieren und ihr eine andere Schriftfarbe zuweisen. Dabei solltest Du darauf achten, dass die Schrift auch bei ausgeschalteten Bildern (und Hintergrundbildern) lesbar bleibt. Einige Webseitenbastler machen es gern so, ein Hintergrundbild zu setzen und dann mit weißer Schrift darauf zu schreiben. Wird das Hintergrundbild dann nicht angezeigt (z.B. weil dies im Browser ausgeschaltet ist oder beim Drucken), kann man die Schrift nicht mehr lesen.

Gruß
Junny

PS: Der Klassennname sollte immer passend zum Inhalt gewählt werden. <td class="white"> oder <td class="links"> wären also völlig falsch und <table class="table"> ist wenig aussagekräftig. Wenn Du Dich so bedeckt über den Inhalt Deiner Seite hältst, ist es allerdings schwer, Dir da konkrete Empfehlungen zu geben.

 

[Larissa13]

Danke! Jetzt stimmt die Tabelle.
Ja, es lag ausschliesslich am Design (Lesbarkeit).

Dabei solltest Du darauf achten, dass die Schrift auch bei ausgeschalteten Bildern (und Hintergrundbildern) lesbar bleibt.

Wenn das Bild nicht Angezeigt wird, ist die Schrift wirklich nicht lesbar. Das muss ich ebenfalls noch ändern.

Zu deinem PS:
Danke. Ja das sehe ich auch so. Ich muss teils die ganze Homepage nochmal neu überarbeiten, da einfach viele Codes noch aus alten Seiten von mir Zusammengefügt wurden, Zwar wird alles richtig Angezeit, doch herrscht noch ein mittelgrosses Chaos. (Darum habe ich auch "table" und bodercolor etc. belassen).
Zum Inhalt meiner Seite. Es ist eine Fanseite über ein GBA Spiel und ausschliesslich für mich bestimmt (Im Sinne von, keine regelmässigen Updates und daran Arbeiten wen mir danach ist). Ich denke zuviel über die Reaktionen der User/Mitleser nach - wie sie auf den Inhalt reagieren/Gedanken darüber machen - daher gebe ich oftmals nur wenig bekannt.

 

[Efchen]

Du könntest Dir mal den The W3C Markup Validation Service ansehen, da kannst Du Syntaxfehler im HTML-Code finden. Weil Du irgendwo Tags schließt, bevor Du andere, darin geöffnete Tags schließt. Du musst immer als erstes das Tag zumachen, was Du zuletzt geöffnet hast.