Table

Table

Um eine Tabelle einzufügen muss man den Tag <table> benützen.
Bei der Tabelle gibt es den Tag <tr>(=Zeile) und den Tag <td>(=Spalte)

Dies ist ein Beispiel
TextText
TextText
TextText
TextText
TextText


In der HTML-Datei stehtIn der CSS-Datei steht
<table class="myTable">
<tbody>
<tr class="ueb"><td colspan="2">Dies ist ein Beispiel</td></tr>
<tr><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td></tr>
</tbody>
</table>

table {
border-collapse: collapse;
width: 200px;
margin-left:auto;
margin-right:auto;
}
td{
border: 1px solid black;
height: 15px;
padding: 5px;
}

.myTable tr:nth-child(2) td:nth-child(1){
background-color:green;
}
.myTable tr:nth-child(3) td:nth-child(1){
background-color:blue;
}
.myTable tr:nth-child(4) td:nth-child(1){
background-color:green;
}
.myTable tr:nth-child(5) td:nth-child(1){
background-color:blue;
}
.myTable tr:nth-child(6) td:nth-child(1){
background-color:green;
}

.myTable tr:nth-child(2) td:nth-child(2){
background-color:blue;
}
.myTable tr:nth-child(3) td:nth-child(2){
background-color:green;
}
.myTable tr:nth-child(4) td:nth-child(2){
background-color:blue;
}
.myTable tr:nth-child(5) td:nth-child(2){
background-color:green;
}
.myTable tr:nth-child(6) td:nth-child(2){
background-color:blue;


.myTable tr:nth-child(1){
color:white;
}
.myTable tr:nth-child(2){
border:2px solid black;
}
.myTable tr:nth-child(3){
border:2px solid black;
}
.myTable tr:nth-child(4){
border:2px solid black;
}
.myTable tr:nth-child(5){
border:2px solid black;
}
.myTable tr:nth-child(6){
border:2px solid black;
}
.myTable .ueb td{
background-color:#555555;
color:#ffffff;
text-line-style:bold;
}



.KlassenName tr:nth-child(Nummer der Reihe){ Formatierungen }Um in einer bestimmten Reihe zu formatieren.
.KlassenName .ueb td{Formatierungen}Um die Klasse in der Klasse zu formatiren.
.KlassenName tr:nth-child(Nummer der Reihe) td:nth-child(Nummer der Zeile){ Formatierungen }Um in einer bestimmten Reihe in einer bestimmten Spalte zu formatieren.
margin: _px; ist der Aussenabstand von der Tabelle
padding: _px;ist der Innenabstad der Tabelle
border: _px Type Farbe; dadurch ändert man den Rahmen, _px für die dicke, Type wie er sein soll, dotted oder solid und Farbe um die Farbe zu ändern.