Tabelle mit CSS

[skorpion]

Hallo an Alle,

ich bin ein neuling in bezug auf HTML und CSS und bitte um Eure Hilfe. Ich habe schon einige Vorzuüge von CSS in einer externen Datei kennengelernt und nutze dieses auch. Allerdings funktioniert das bisher nur bei einfachem Text. Ich stehte bei einer Tabelle auf der Leitung.

In der meiner Tabelle die ich seither in reinem HTML angelegt habe sieht es sehr unübersichtlich aus durch die vielen vorgaben für jede Zeile. Das möchte ich mit CSS vereinfachen um neue Daten einfacher einfügen zu können.

Wo ich derzeit auf der Leitung stehe ist folgendes.
Wie muß der Code in der CSS datei aussehen damit daraus eine tabelle wird und wie kommen dann die daten aus der Seite korrekt in die Tabelle? Mit den ganzen beschreibungen der CSS-Tutorials komme ich nicht wirklich weiter

Meine Tabelle in HTML sieht derzeit so aus, aber wie muß die HTML siete aussehen und die CSS datei damit die Tabelle wieder so aussieht?

Code: Alles auswählen

</TABLE>

<p>
<B><FONT FACE="MS Sans Serif" span style="font-size:14pt"><P ALIGN="CENTER">FW - P 2004</P></B></span></Font>
<TABLE CELLSPACING=0 BORDER=0 CELLPADDING=4 WIDTH=1050>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf"> 064/2004</a> BR 40X</span></TD>
   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf"> Anlage </a> </span></TD><tr>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf"> 062/2004 </a> Bedienung </span></TD>
   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><tr>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf"> 060/2004</a> Dosto </span></TD>
   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><tr>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf"> 043/2004</a>Einstelltabellen </span></TD>
   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><tr>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf"> 031/2004</a> Schalterstellung </span></TD>
   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><tr>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf"> 021/2004</a> Diagnose </span></TD>
   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><tr>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf" target="rechts"> 016/2004</a> Ausfall </span></TD>
   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27></TD><tr>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf" target="rechts"> 014/2004</a>  BR 808 </span></TD>
   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf" target="rechts"> Anlage 1</a> </span></TD><tr>

   <TD WIDTH="50%" VALIGN="TOP" HEIGHT=27><span style="font-size:14pt"><a href="..\XXX.pdf" target="rechts"> 006/2004</a> Zub </span></TD><tr>

</TABLE>
</p>


Danke vorab für die Hilfe

[sejuma]

Vorausgesetzt es handelt sich wirklich um eine Tabelle, nämlich eine strukturierte Darstellung und kein generelles Layout, dann kannst du natürlich auch weiterhin eine Tabelle benutzen und per CSS formatieren.

Der HTML-Teil bezieht sich dann ausschließlich auf die Tabelle ohne Formatierung, z.b. so:

Code: Alles auswählen

<table>
<tr>
<td>Zellinhalt 1</td>
<td>Zellinhalt 2</td>
</tr>
</table>

Die Zellformatierung kannst du dann per CSS hinterlegen, z.B.

Code: Alles auswählen

td {
width: 50%;
height: 27px;
font-size: 14pt;
}

Willst du einzelne Zellen unterschiedlich gestalten, dann verwende CSS-Klassen und weise diese den Zellen zu.

Du kannst auch Formatierungen für die Tabelle selbst oder die Zeilen vornehmen:

Code: Alles auswählen

table {Styleangaben}
tr {Styleangaben}

[skorpion]

Hallo,
danke für die schnelle Antwort.

Genau so ähnlich habe ich es mir vorgestellt.
Mir hat irgenwie nur der Anfang gefehlt.

Nun kann ich das nach meinen vorstellungen gestalten.
Super

Solch ein einfaches Beispiel hat mir seither in den ganzen Beschreibungen im Netz gefehlt.

Viele Grüße