«

»

Lis 03

Wydrukuj to Wpis

html/css – Ładne tabele

htmlcss-ladne-tabele

W tym artykule pokażę jak stworzyć ładne tabele za pomocą stylów css. Styl tabeli można wykonać w HTML i CSS przy pomocy atrybutów, które mogą odnosić się do całej tabeli lub jej poszczególnych elementów. Efekt końcowy może być różny w zależności od przeglądarki, w której zostanie otwarta tabela.


html

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
<!doctype html>
	<html lang="pl">
		<head>
			<meta charset="utf-8">
			<link href="style.css" rel="stylesheet" type="text/css">
			<title>Ładne tabele w html/css</title>
		</head>
		<body>
			<table class="tabela">
 
				<thead>
					<tr>
						<td>Ustawienie</td>
						<td class="zolty">Drupal</td>
						<td class="czerwony" nowrap>Joomla</td>
						<td class="zielony">WordPress</td>
					</tr>
				</thead>
 
				<tbody>
					<tr>
						<td nowrap>Spam</td>
						<td class="zolty">Akismet, CAPTCHA, analizator</td>
						<td class="czerwony">CAPTCHA</td>
						<td class="zielony">Akismet, CAPTCHA, analizator</td>
					</tr>
 
					<tr>
						<td nowrap>Edytor</td>
						<td class="zolty">CKEditor, WYSIWYG</td>
						<td class="czerwony">TinyMCE,CodeMirror</td>
						<td class="zielony">WP Editor, TinyMCE Editor</td>
					</tr>
 
					<tr>
						<td nowrap>Język polski</td>
						<td class="zolty"><img alt="ok" src="ok.png" height="16" width="16"></td>
						<td class="czerwony"><img alt="ok" src="ok.png" height="16" width="16"></td>
						<td class="zielony"><img alt="ok" src="ok.png" height="16" width="16"></td>
					</tr>
				</tbody>
 
				<tfoot>
					<tr>
						<td nowrap>Ocena</td>
						<td class="zolty">10</td>
						<td class="czerwony">10</td>
						<td class="zielony">10</td>
					</tr>
				</tfoot>
 
			</table>
		</body>
	</html>

css

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
65
66
67
68
69
70
71
72
73
74
75
76
77
.tabela
{
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 0;
  text-shadow: 0 1px 0 #fff;
  background: #fafafa;
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
  margin-top:20px;
  margin-bottom:20px;
}
 
.tabela td
{
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
 
.tabela tbody td
{
  text-align: center;
  width: 150px;
}
 
 .tabela td.czerwony
{
  background: #f6a3a3;
  border-right: 1px solid white;
}
 
.tabela td.zolty
{
  background: #f7ffb2;
  border-right: 1px solid white;
}
 
.tabela td.zielony
{
  background: #c8f6a3;
}
 
.tabela td:nowrap
{
  white-space: nowrap;
}
 
.tabela thead td
{
  font-size: 120%; 
  font-weight: bold;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea;
}
 
.tabela tfoot td
{
  font-size: 120%; 
  font-weight: bold;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}
Prosta tabela


html

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
<!doctype html>
	<html lang="pl">
		<head>
			<meta charset="utf-8">
			<link href="style.css" rel="stylesheet" type="text/css">
			<title>Ładne tabele w html/css</title>
		</head>
		<body>
			<table class="tabela2" cellspacing='0'>
				<tr>
					<th>Ustawienie</th>
					<th>Drupal</th>
					<th>Joomla</th>
					<th>WordPress</th>
				</tr>
 
				<tr>
					<td>Spam</td>
					<td>Akismet, CAPTCHA, analizator</td>
					<td>CAPTCHA</td>
					<td>Akismet, CAPTCHA, analizator</td>
				</tr>
 
				<tr>
					<td>Edytor</td>
					<td>CKEditor, WYSIWYG</td>
					<td>TinyMCE,CodeMirror</td>
					<td>WP Editor, TinyMCE Editor</td>
				</tr>
 
				<tr>
					<td>Język polski</td>
					<td><img alt="ok" src="ok.png" height="16" width="16"></td>
					<td><img alt="ok" src="ok.png" height="16" width="16"></td>
					<td><img alt="ok" src="ok.png" height="16" width="16"></td>
				</tr>
 
				<tr>
					<td>Ocena</td>
					<td>10</td>
					<td>10</td>
					<td>10</td>
				</tr>
 
			</table>
 
		</body>
	</html>

css

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
.tabela2 {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    text-shadow: 1px 1px 0px #fff;
    background:#eaebec;
    margin:20px;
    border:#ccc 1px solid;
    border-collapse:separate;
 
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
 
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
}
 
.tabela2 th {
    font-weight:bold;
    padding:21px 25px 22px 25px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
 
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
.tabela2 th:first-child{
    text-align: left;
    padding-left:20px;
}
.tabela2 tr:first-child th:first-child{
    -moz-border-radius-topleft:3px;
    -webkit-border-top-left-radius:3px;
    border-top-left-radius:3px;
}
.tabela2 tr:first-child th:last-child{
    -moz-border-radius-topright:3px;
    -webkit-border-top-right-radius:3px;
    border-top-right-radius:3px;
}
.tabela2 tr{
    text-align: center;
    padding-left:20px;
}
.tabela2 tr td:first-child{
    text-align: left;
    padding-left:20px;
    border-left: 0;
}
.tabela2 tr td {
    padding:18px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
 
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.tabela2 tr:nth-child(even) td{
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
.tabela2 tr:last-child td{
    border-bottom:0;
}
.tabela2 tr:last-child td:first-child{
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px;
    border-bottom-left-radius:3px;
}
.tabela2 tr:last-child td:last-child{
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px;
    border-bottom-right-radius:3px;
}

Załączniki do pobrania

Permalink do tego artykułu: http://tmall.com.pl/htmlcss-ladne-tabele/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć tych znaczników i atrybutów HTMLa: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>