CSS-Tabelle

dimitrif

Lt. Junior Grade
Registriert
Juli 2004
Beiträge
394
Hallo, ich hätte eine Frage:

Ich habe Internetseite gebastelt, die besteht aus unterschiedlichen Layers. Ich möchte es auch so lassen, wenn es geht. Jetzt mochte ich in einem bestimmten layer eine CSS-Tabelle haben - nur wenn ich im head eintragen würde sowas in der Art:

<style type="text/css">
table {
width: 100%;
border: 1px thin #9AA7AE;
}
th {

border: 1px solid #9AA7AE;
padding: 3px 15px;
}
td {

border: 1px solid #9AA7AE;
padding: 3px 15px;
}

</style>

werden alle Tabelle auf meiner Seite davon betroffen. Wie kann ich explizit nur eine Tabelle so gestalten?

Vielen Dank
 
Mit einer Class oder ID, also entweder <table class="anders"> oder <table id="anders">, wenn die ID nur einmal im Dokument vorkommt.
 
Danke für die schnelle Antwort. Es soll also so aussehen, oder?

<style type="text/css">
a.irgendwas {

table {
width: 100%;
border: 1px thin #9AA7AE;
}
th {

border: 1px solid #9AA7AE;
padding: 3px 15px;
}
td {

border: 1px solid #9AA7AE;
padding: 3px 15px;
}
tr:hover { background: #e3e3e3 }
.hgrün { background-color:#c3e3fc; }
.grün { background-color:#91cefc; }
.gelb { background-color:#ffb54a; }
}
</style>
 
Das sieht komisch aus, denn Du umklammerst ja mehrere Stile!?

Ich denke eher so:

Code:
<style type="text/css">

table
{
width: 100%;
border: 1px thin #9AA7AE;
}

th
{
border: 1px solid #9AA7AE;
padding: 3px 15px;
}

td
{
border: 1px solid #9AA7AE;
padding: 3px 15px;
}

table.anders
{
[hierkommendieanweisungen]
}
</style>
 
Ok, dann habe ich einfach so gemacht, denn die anderen Tabellen bleiben ohne CSS

table.test {
width: 100%;
border: 1px thin #9AA7AE;
}
th {

border: 1px solid #9AA7AE;
padding: 3px 15px;
}
td {

border: 1px solid #9AA7AE;
padding: 3px 15px;
}


Aber das ergibt genau das gleiche - es beeinflusst das Ganze und überall auf meiner Seite sind jetzt CSS-Tabellen. Vielleciht verstehe ich was falsch, aber ich komme nicht weiter.
 
Moment!

Du solltest die anderen Tabellen nicht ohne CSS lassen. Ansonsten sind sie wie ein Fähnchen im Wind und richten sich nach den Browsereinstellungen Deiner Besucher und nicht nach dem Seitenlayout.

Die Lösung ist folgendermaßen:

Du machst einen Style für die "normalen" Tabellen und bedienst Dich dabei der Selektoren <table>, <td> und <tr>. Das hast Du ja schon gemacht und das kannst Du auch so lassen. Dann erstellst Du eine CSS-Class (in diesem Fall nenne ich die "anders"), die nur dann zum tragen kommt, wenn sie mit dem Elternelement <table> auftritt.

Das sieht wie gesagt so aus:

Code:
table.anders
{
[hierkommendieanweisungen]
}

"Normale" Tabellen schreibst Du dann auch ganz normal. Nur bei der einen Tabelle, die anders aussehen soll, da schreibst Du:

Code:
<table class="anders">
<tr>
<td></td>
</tr>
</table>

Dann wird diese, und nur diese Tabelle so formatiert, wie Du es in der Class "table.anders" angegeben hast.
 
Noch ein Beispiel, dieses Mal mit einer ID:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Einfach ein Test</title>
<style type="text/css">

table
{
width: 100%;
border: 1px thin #9AA7AE;
}

th
{
border: 1px solid #9AA7AE;
padding: 3px 15px;
}

td
{
border: 1px solid #9AA7AE;
padding: 3px 15px;
}

#anders
{
background-color:#FF0000;
}
</style>
</head>
<body>
<table>
  <tr>
    <td>Erste Tabelle</td>
  </tr>
</table>
<table id="anders">
  <tr>
    <td>Andere Tabelle</td>
  </tr>
</table>
<table>
  <tr>
    <td>Noch eine Tabelle</td>
  </tr>
</table>
<table>
  <tr>
    <td>Noch so'n Ding</td>
  </tr>
</table>
</body>
</html>

Das sieht im Ergebnis dann so aus:
 

Anhänge

  • tabellen.jpg
    tabellen.jpg
    19,2 KB · Aufrufe: 123
aha, dann leuchtet mir was ein............ok, ich würde es ausprobieren.

Danke erstmal.
 
Zurück
Oben