- Beobachter: 0
- Lesezeichen: 0
- Zugriffe: 2331
Autor: Sladdi
phpBB Version: 3.0.11
Browser Version: getestet mit FF 17 und IE 10
Beschreibung: 3spaltiger Tabellencode - Design über CSS & Inhalt über die HTML-Ersetzung anpassbar.
Spalten und Zeilen beliebig erweiterbar.
Demo: 3 Spaltentabelle
Zugang: Name: testuser / Pass: TESTUSER
HTML:
- Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #000000;
padding:3px 7px 2px 7px;
background-color:#FF0000;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#8E8E8E;
color:#ffffff;
}
#customers tr.alt1 td
{
color:#000000;
background-color:#FF00FF;
}
#customers tr.alt2 td
{
color:#000000;
background-color:#FFFF00;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Spalte1</th>
<th>Spalte2</th>
<th>Spalte3</th>
</tr>
<tr>
<td>Spalte1 Text Zeile1</td>
<td>Spalte2 Text Zeile1</td>
<td>Spalte3 Text Zeile1</td>
</tr>
<tr class="alt2">
<td>Spalte1 Text Zeile2</td>
<td>Spalte2 Text Zeile2</td>
<td>Spalte3 Text Zeile2</td>
</tr>
<tr>
<td>Spalte1 Text Zeile3</td>
<td>Spalte2 Text Zeile3</td>
<td>Spalte3 Text Zeile3</td>
</tr>
<tr class="alt1">
<td>Spalte1 Text Zeile4</td>
<td>Spalte2 Text Zeile4</td>
<td>Spalte3 Text Zeile4</td>
</tr>
</table>
</body>
</html>
Demobild:
|
Kommentar: Die grellen Farben sollen zeigen, wie und wo die Farben definiert werden und wie sie sich in den Zeilen auswirken.
Mit einer Abkopplung der CSS wäre das Design natürlich auf verschiedene Styles anwendbar.....
