CSS-Tabelle

dimitrif · 10. Dezember 2006

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

Tankred · 10. Dezember 2006

Mit einer Class oder ID, also entweder <table class="anders"> oder <table id="anders">, wenn die ID nur einmal im Dokument vorkommt.

Mr. Snoot · 10. Dezember 2006

In dem du die Formatierung einer Klasse zuweist, z.B.

table.name {}

Und im HTML-Teil:

<table class="name">

Dazu findet sich auch hier einiges: http://de.selfhtml.org/css/formate/zentrale.htm

Tzzz .. Tankred, du bist ja schon wieder schneller

dimitrif · 10. Dezember 2006

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>

Tankred · 10. Dezember 2006

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>

dimitrif · 10. Dezember 2006

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.

Tankred · 10. Dezember 2006

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.

Tankred · 10. Dezember 2006

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:

dimitrif · 10. Dezember 2006

aha, dann leuchtet mir was ein............ok, ich würde es ausprobieren.

Danke erstmal.

dimitrif · 10. Dezember 2006

also mit id hats geklappt.

Vielen Dank noch mal

Suche

CSS-Tabelle

dimitrif

Lt. Junior Grade

Tankred

Gast

Mr. Snoot

Gast

dimitrif

Lt. Junior Grade

Tankred

Gast

dimitrif

Lt. Junior Grade

Tankred

Gast

Tankred

Gast

Anhänge

dimitrif

Lt. Junior Grade

dimitrif

Lt. Junior Grade

Ähnliche Themen