Tabelle gestalten mit CSS, Ausrichtung, Spaltenhintergrund

Rola · 3 Juni 2012

Die beigefügte Tabelle (Auszug aus einer großen Tabelle) möchte ich mit CSS gestalten.

1. Die Textausrichtung von td soll je nach Dateninhalt mal mitttig, mal rechts und mal links sein

Wie kann ich das anstattt mit HTML besser mit CSS realisieren?

2. Die einzelnen Spalten der Tabelle sollten abwechselnd mit einen light-grey hinterlegt sein.

Wie kann ich das mit HTML oder CSS gestalten?

Bin nicht so erfahren und dankbar für jede Hilfe.

Roland

-------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
/* CSS Definitionen */

div.header,div.footer {
padding:0.5em; color:white; background-color:gray; clear:left;
}

th {
text-align: left; width: 300px; background-Color: #508Aff; color: white;
}
</style>
<title>
</title>
</head>
<body>
<div class="header">
<h2 class="header"><strong>
<span style="color: #ffffff; font-size: 24pt;">Haushalt-Kosten-Jahresvergleich
</span></strong></h2>
</div>

<table style="width: 100%;" bgcolor="#cdcdcd" border="3" bordercolor="red" cellpadding="0" cellspacing="0">
<tbody>
<tr><td></td><td>
<table bgcolor="#ffffff" border="1">
<tbody>
<tr>
<th>0. Allgemeine Verwaltung
</th>
<td align="center">2008</td>
<td align="center">2011</td>
<td align="center">2012</td>
<td align="center">Änd.</td>
</tr>
<tr><td>Gemeindeorgane</td>
<td style="text-align: right;">15,89</td>
<td style="text-align: right;">17,19</td>
<td style="text-align: right;">18,73</td>
<td>gut</td>
</tr>
<tr><td>Hauptverwaltung</td>
<td style="text-align: right;">47,59</td>
<td style="text-align: right;">41,70</td>
<td style="text-align: right;">40,12</td>
<td>schlecht</td>
<tr><td>Summe</td>
<td style="text-align: right;">170,24</td>
<td style="text-align: right;">177,98</td>
<td style="text-align: right;">185,77</td>
</tr>
</tbody>
</table></td>
</tr>

<tr><td>
<table bgcolor="#ffffff" border="1">
<tbody>
<tr>
<th>1. Öffentlichkeitsarbeit
</th>
<td align="center">2008</td>
<td align="center">2011</td>
<td align="center">2012</td>
<td align="center">Änd.</td>
</tr>
<tr><td>Öffentliche Daten</td>
<td style="text-align: right;">2,04</td>
<td style="text-align: right;">-2,14</td>
<td>gut</td>
<td>gut</td>
</tr>
<tr><td>Jugendforum</td>
<td style="text-align: right;">38,37</td>
<td style="text-align: right;">40,60</td>
<td></td>
<td>gut</td>
<tr><td>Summe</td>
<td style="text-align: right;">52,02</td>
<td style="text-align: right;">48,15</td><td></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
<div class="footer">Copyright 2012 by nobody
</div>
</body>
</html>

noxTo · 3 Juni 2012

du gibst dem kind nen namen

<td class="center">2008</td>
<td class="center">2011</td>
<td class="center">2012</td>
<td class="center">Änd.</td>

und schreibst in die css

td.center
{
text-align: center;
}

2. Die einzelnen Spalten der Tabelle sollten abwechselnd mit einen light-grey hinterlegt sein.

dazu fällt mir momentan nur ein 'handarbeit', also jede zweite spalte die background-color eintragen.

threadi · 3 Juni 2012

Letzteres kann man auch mit der CSS-Pseudoklasse nth-child() erreichen, allerdings wird die bisher nicht von IE unterstützt.
Useful :nth-child Recipes | CSS-Tricks

Tabelle gestalten mit CSS, Ausrichtung, Spaltenhintergrund

Rola

Neues Mitglied

noxTo

Mitglied

threadi

Moderator

Neueste Beiträge