Schicke HTML Tabellen mit CSS

Der Artikel „Top 10 CSS Table Designs“ zeigt, wie man schnöde HTML-Tabellen mit CSS richtig schick machen kann. Im Anhang befindet sich eine „schnöde“ HTML-Tabelle nach dem Standard des W3C sowie eine schicke Tabelle mit abgerundeten Kanten.

Einfache Tabelle:

HTML-Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<table>
	<thead>
		<tr>
			<th width="100px">Jahr:</th>
			<th width="100px">Zahl:</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="2">Die Entwicklung seit 2008.</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>2010</td>
			<td>35.000</td>
		</tr>
		<tr>
			<td>2009</td>
			<td>17.500</td>
		</tr>
		<tr>
			<td>2008</td>
			<td>11.000</td>
		</tr>								
	</tbody>
</table>

Tabelle mit abgerundeten Kanten:

HTML-Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<table cellspacing="0px">
	<thead>
		<tr>
			<th class="top-left" width="100px">Jahr:</th>
			<th width="100px">Zahl:</th>
			<th class="top-right" width="37px">&nbsp;</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td class="bottom-left" colspan="2">Die Entwicklung seit 2008.</td>
			<td class="bottom-right" width="37px">&nbsp;</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>2010</td>
			<td>35.000</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>2009</td>
			<td>17.500</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>2008</td>
			<td>11.000</td>
			<td>&nbsp;</td>
		</tr>								
	</tbody>
</table>

CSS-Stil:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

table
{
	border-spacing: 0px;
	font-family: Arial;
	color: #484747;
}
 
th
{
	padding: 8px;
	background-color: #9AC8EB;
	text-align: left;
}
 
th.top-left
{
	background-image: url(../images/th-top-left.png);
	background-repeat: no-repeat;	
}
 
th.top-right
{
	background-image: url(../images/th-top-right.png);	
	background-repeat: no-repeat;	
	background-position: right;
}
 
td
{
	padding: 8px;
	border-top: 1px solid #484747;
	background-color: #EDEDED;
}
 
td.bottom-left
{
 
	background-image: url(../images/td-bottom-left.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
 
td.bottom-right
{
	background-image: url(../images/td-bottom-right.png);	
	background-repeat: no-repeat;	
	background-position: right bottom;
}
 
tr:hover td
{
	background-color: #9AC8EB;
}
 
tfoot tr:hover td
{
	background-color: #EDEDED;
}
 
tfoot td
{
	font-style: italic;
	font-size: 14px;
}

Screenshot:
Tabelle mit abgerundeten Kanten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.