Красивое оформление таблиц css: Красивое оформление таблиц

Содержание

Красивая стилизация таблицы на CSS – Di-Grand

table {

    overflow:hidden;

    border:1px solid #d3d3d3;

    background:#fefefe;

    width:70%;

    margin:5% auto 0;

    -moz-border-radius:5px; /* FF1+ */

    -webkit-border-radius:5px; /* Saf3-4 */

    border-radius:5px;

    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

}

th, td {

    padding:18px 28px 18px;

    text-align:center;

}

th {

    padding-top:22px;

    text-shadow: 1px 1px 1px #fff;

    background:#e8eaeb;

}

td {

    border-top:1px solid #e0e0e0;

    border-right:1px solid #e0e0e0;

}

tr.odd-row td {

    background:#f6f6f6;

}

td.first, th.first {

    text-align:left

}

td.last {

    border-right:none;

}

td {

    background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);

    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));

}

tr.odd-row td {

    background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);

    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));

}

th {

    background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);

    background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));

}

tr:first-child th.first {

    -moz-border-radius-topleft:5px;

    -webkit-border-top-left-radius:5px; /* Saf3-4 */

}

tr:first-child th.last {

    -moz-border-radius-topright:5px;

    -webkit-border-top-right-radius:5px; /* Saf3-4 */

}

tr:last-child td.first {

    -moz-border-radius-bottomleft:5px;

    -webkit-border-bottom-left-radius:5px; /* Saf3-4 */

}

tr:last-child td.last {

    -moz-border-radius-bottomright:5px;

    -webkit-border-bottom-right-radius:5px; /* Saf3-4 */

}

Красивые таблицы на 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
<table cellspacing="0">
    <tr>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Нет</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>50%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>0%</td>
        <td>Да</td>
    </tr>
    <tr>
        <td>Etiam dolor</td>
        <td>100%</td>
        <td>Да</td>
    </tr>
</table>

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
table {
    overflow:hidden;
    border:1px solid #d3d3d3;
    background:#fefefe;
    width:70%;
    margin:5% auto 0;
    -moz-border-radius:5px; /* FF1+ */
    -webkit-border-radius:5px; /* Saf3-4 */
    border-radius:5px;
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
 
th, td {
    padding:18px 28px 18px; 
    text-align:center; 
}
 
th {
    padding-top:22px; 
    text-shadow: 1px 1px 1px #fff;
    background:#e8eaeb;
}
 
td {
    border-top:1px solid #e0e0e0; 
    border-right:1px solid #e0e0e0;
}
 
tr.odd-row td {
    background:#f6f6f6;
}
 
td.first, th.first {
    text-align:left
}
 
td.last {
    border-right:none;
}
 
td {
    background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
 
tr.odd-row td {
    background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
 
th {
    background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
    background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
 
tr:first-child th.first {
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px; /* Saf3-4 */
}
 
tr:first-child th.last {
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px; /* Saf3-4 */
}
 
tr:last-child td.first {
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
 
tr:last-child td.last {
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}

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
<table>
    <thead>
        <tr>
            <th>№</th>        
            <th>Top 10 фильмов</th>
            <th>Год</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>        
        <td>Побег из Шоушенка</td>
        <td>1994</td>
    </tr>        
    <tr>
        <td>2</td>         
        <td>Крестный отец</td>
        <td>1972</td>
    </tr>
    <tr>
        <td>3</td>         
        <td>Крестный отец: Часть II</td>
        <td>1974</td>
    </tr>    
    <tr>
        <td>4</td> 
        <td>Хороший, плохой, злой</td>
        <td>1966</td>
    </tr>
    <tr>
        <td>5</td> 
        <td>Криминальное чтиво</td>
        <td>1994</td>
    </tr>
    <tr>
        <td>6</td> 
        <td>12 разгневанных мужчин</td>
        <td>1957</td>
    </tr>
    <tr>
        <td>7</td> 
        <td>Список Шиндлера</td>
        <td>1993</td>
    </tr>    
    <tr>
        <td>8</td> 
        <td>Пролетая над гнездом кукушки</td>
        <td>1975</td>
    </tr>
    <tr>
        <td>9</td> 
        <td>Темный рыцарь</td>
        <td>2008</td>
    </tr>
    <tr>
        <td>10</td> 
        <td>Властелин колец: Возвращение Короля</td>
        <td>2003</td>
    </tr> 
</table>

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
.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}
 
.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    
 
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}
 
.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}
 
.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}
 
.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
 
.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
 
.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
 
.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
 
.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

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
<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        <table>
            <tr>
                <td>iaculis</td>
                <td>adipiscing</td>
                <td>pretium</td>
                <td>egestas</td>
            </tr>
            <tr>
                <td>placerat</td>
                <td>luctus</td>
                <td>tristique</td>
                <td>dignissim</td>
            </tr>
            <tr>
                <td>dictum</td>
                <td>tincidunt</td>
                <td>velit</td>
                <td>mauris</td>
            </tr>
        </table>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
table{
    border-collapse:collapse; /* убираем двойную границу между ячейками */
}
 
td, th{
    padding:10px; /* внутренние отступы для тега заголовка(th) таблицы и ячейки(td) в 10 пикселей(px) */
    border:1px solid #cccccc; /* серая граница для тега заголовка и ячейки */
}
 
th{
    background-color:#C1D3FF; /* голубой цвет фона заголовка(th) */
}

1
2
3
4
5
6
7
8
<table>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
</table>

1
2
3
4
5
6
7
8
table{width:500px;height:350px;cursor:pointer;
margin:100px auto;}
tr{background:#cffffc;text-align:center;}
td{padding:30px;border:1px solid #111;color:#888;}
td:hover{color:#000;font-weight:bold;background:#FFFFCC;
box-shadow:0 0 80px 1px #CC9900 inset;}
td:active{background:#FFFFCC;
box-shadow:0 0 8px 1px #333 inset;}

10203040
50607080
90100110120

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>

<thead>

<tr>

<th></th>

<th scope=»col» abbr=»Starter»>Smart Starter</th>

<th scope=»col» abbr=»Medium»>Smart Medium</th>

<th scope=»col» abbr=»Business»>Smart Business</th>

<th scope=»col» abbr=»Deluxe»>Smart Deluxe</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope=»row»>Price per month</th>

<td>$ 2.90</td>

<td>$ 5.90</td>

<td>$ 9.90</td>

<td>$ 14.90</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope=»row»>Storage Space</th>

<td>512 MB</td>

<td>1 GB</td>

<td>2 GB</td>

<td>4 GB</td>

</tr>

<tr>

<th scope=»row»>Bandwidth</th>

<td>50 GB</td>

<td>100 GB</td>

<td>150 GB</td>

<td>Unlimited</td>

</tr>

<tr>

<th scope=»row»>MySQL Databases</th>

<td>Unlimited</td>

<td>Unlimited</td>

<td>Unlimited</td>

<td>Unlimited</td>

</tr>

<tr>

<th scope=»row»>Setup</th>

<td>19.90 $</td>

<td>12.90 $</td>

<td>free</td>

<td>free</td>

</tr>

<tr>

<th scope=»row»>PHP 5</th>

<td><span></span></td>

<td><span></span></td>

<td><span></span></td>

<td><span></span></td>

</tr>

<tr>

<th scope=»row»>Ruby on Rails</th>

<td><span></span></td>

<td><span></span></td>

<td><span></span></td>

<td><span></span></td>

</tr>

</tbody>

</table


table.table1{

    font-family: «Trebuchet MS», sans-serif;

    font-size: 16px;

    font-weight: bold;

    line-height: 1.4em;

    font-style: normal;

    border-collapse:separate;

}

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

.table1 thead th{

    padding:15px;

    color:#fff;

    text-shadow:1px 1px 1px #568F23;

    border:1px solid #93CE37;

    border-bottom:3px solid #9ED929;

    background-color:#9DD929;

    background:-webkit-gradient(

        linear,

        left bottom,

        left top,

        color-stop(0.02, rgb(123,192,67)),

        color-stop(0.51, rgb(139,198,66)),

        color-stop(0.87, rgb(158,217,41))

        );

    background: -moz-linear-gradient(

        center bottom,

        rgb(123,192,67) 2%,

        rgb(139,198,66) 51%,

        rgb(158,217,41) 87%

        );

    -webkit-border-top-left-radius:5px;

    -webkit-border-top-right-radius:5px;

    -moz-border-radius:5px 5px 0px 0px;

    border-top-left-radius:5px;

    border-top-right-radius:5px;

}


.table1 thead th:empty{

    background:transparent;

    border:none;

}


.table1 tfoot td{

    color: #9CD009;

    font-size:32px;

    text-align:center;

    padding:10px 0px;

    text-shadow:1px 1px 1px #444;

}

.table1 tfoot th{

    color:#666;

}


.table1 tbody td{

    padding:10px;

    text-align:center;

    background-color:#DEF3CA;

    border: 2px solid #E7EFE0;

    -moz-border-radius:2px;

    -webkit-border-radius:2px;

    border-radius:2px;

    color:#666;

    text-shadow:1px 1px 1px #fff;

}


.table1 tbody span.check::before{

    content : url(../images/check0.png)

}


table.table2{

    font-family: Georgia, serif;

    font-size: 18px;

    font-style: normal;

    font-weight: normal;

    letter-spacing: -1px;

    line-height: 1.2em;

    border-collapse:collapse;

    text-align:center;

}


.table2 thead th, .table2 tfoot td{

    padding:20px 10px 40px 10px;

    color:#fff;

    font-size: 26px;

    background-color:#222;

    font-weight:normal;

    border-right:1px dotted #666;

    border-top:3px solid #666;

    -moz-box-shadow:0px -1px 4px #000;

    -webkit-box-shadow:0px -1px 4px #000;

    box-shadow:0px -1px 4px #000;

    text-shadow:0px 0px 1px #fff;

    text-shadow:1px 1px 1px #000;

}


.table2 tfoot th{

    padding:10px;

    font-size:18px;

    text-transform:uppercase;

    color:#888;

}


.table2 tfoot td{

    font-size:36px;

    color:#EF870E;

    border-top:none;

    border-bottom:3px solid #666;

    -moz-box-shadow:0px 1px 4px #000;

    -webkit-box-shadow:0px 1px 4px #000;

    box-shadow:0px 1px 4px #000;

}


.table2 thead th:empty{

    background:transparent;

    -moz-box-shadow:none;

    -webkit-box-shadow:none;

    box-shadow:none;

}


.table2 thead :nth-last-child(1){

    border-right:none;

}


.table2 thead :first-child,

.table2 tbody :nth-last-child(1){

    border:none;

}


.table2 tbody th{

    text-align:right;

    padding:10px;

    color:#333;

    text-shadow:1px 1px 1px #ccc;

    background-color:#f9f9f9;

}


.table2 tbody td{

    padding:10px;

    background-color:#f0f0f0;

    border-right:1px dotted #999;

    text-shadow:-1px 1px 1px #fff;

    text-transform:uppercase;

    color:#333;

}


.table2 tbody span.check::before{

    content : url(../images/check1.png)

}


table.table3{

    font-family:Arial;

    font-size: 18px;

    font-style: normal;

    font-weight: normal;

    text-transform: uppercase;

    letter-spacing: -1px;

    line-height: 1.7em;

    text-align:center;

    border-collapse:collapse;

}


.table3 thead th{

    padding:6px 10px;

    text-transform:uppercase;

    color:#444;

    font-weight:bold;

    text-shadow:1px 1px 1px #fff;

    border-bottom:5px solid #444;

}


.table3 thead th:empty{

    background:transparent;

    border:none;

}

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

.table3 thead :nth-child(2),

.table3 tfoot :nth-child(2){

    background-color: #7FD2FF;

}

.table3 tfoot :nth-child(2){

    -moz-border-radius:0px 0px 0px 5px;

    -webkit-border-bottom-left-radius:5px;

    border-bottom-left-radius:5px;

}

.table3 thead :nth-child(2){

    -moz-border-radius:5px 0px 0px 0px;

    -webkit-border-top-left-radius:5px;

    border-top-left-radius:5px;

}

.table3 thead :nth-child(3),

.table3 tfoot :nth-child(3){

    background-color: #45A8DF;

}

.table3 thead :nth-child(4),

.table3 tfoot :nth-child(4){

    background-color: #2388BF;

}

.table3 thead :nth-child(5),

.table3 tfoot :nth-child(5){

    background-color: #096A9F;

}

.table3 thead :nth-child(5){

    -moz-border-radius:0px 5px 0px 0px;

    -webkit-border-top-right-radius:5px;

    border-top-right-radius:5px;

}

.table3 tfoot :nth-child(5){

    -moz-border-radius:0px 0px 5px 0px;

    -webkit-border-bottom-right-radius:5px;

    border-bottom-right-radius:5px;

}


.table3 tfoot td{

    font-size:38px;

    font-weight:bold;

    padding:15px 0px;

    text-shadow:1px 1px 1px #fff;

}


.table3 tbody td{

    padding:10px;

}


.table3 tbody tr:nth-child(4) td{

    font-size:26px;

    font-weight:bold;

}

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

.table3 tbody td:nth-child(even){

    background-color:#444;

    color:#444;

    border-bottom:1px solid #444;

    background:-webkit-gradient(

        linear,

        left bottom,

        left top,

        color-stop(0.39, rgb(189,189,189)),

        color-stop(0.7, rgb(224,224,224))

        );

    background:-moz-linear-gradient(

        center bottom,

        rgb(189,189,189) 39%,

        rgb(224,224,224) 70%

        );

    text-shadow:1px 1px 1px #fff;

}

.table3 tbody td:nth-child(odd){

    background-color:#555;

    color:#f0f0f0;

    border-bottom:1px solid #444;

    background:-webkit-gradient(

        linear,

        left bottom,

        left top,

        color-stop(0.39, rgb(85,85,85)),

        color-stop(0.7, rgb(105,105,105))

        );

    background:-moz-linear-gradient(

        center bottom,

        rgb(85,85,85) 39%,

        rgb(105,105,105) 70%

        );

    text-shadow:1px 1px 1px #000;

}


.table3 tbody td:nth-last-child(1){

    border-right:1px solid #222;

}


.table3 tbody th{

    color:#696969;

    text-align:right;

    padding:0px 10px;

    border-right:1px solid #aaa;

}


.table3 tbody span.check::before{

    content : url(../images/check2.png)

}

Предварительные требования: Основы HTML (изучение
Введение в HTML), знание
HTML-таблицы и представление о
как работает CSS (изучите первые шаги CSS.)
Цель: Чтобы узнать, как эффективно стилизовать таблицы HTML.