서현석 / WebServicePrograming

Go to a project
Toggle navigation Toggle navigation pinning
서현석
5597d70d 1 parent 0efda40d

practice css alone (table, design)

Inline Side-by-side
Showing 1 changed file with 150 additions and 0 deletions
1 +
2 +<!DOCTYPE html>
3 +<html lang="ko">
4 +<head>
5 + <meta charset="utf-8">
6 + <style>
7 + table {
8 + border-collapse: collapse;
9 + width: 100%;
10 + }
11 +
12 + /* 선택된 항목들에 1px 색상줄 표시 */
13 + table, th, tr, td {
14 + border: 1px solid black;
15 + }
16 +
17 + /* th 바탕색상, 글자색상 */
18 + th {
19 + background-color: green;
20 + color:white;
21 + }
22 +
23 + /* th 왼쪽에 두꺼운 색깔 선 넣기 */
24 + th {
25 + border-left: 5px solid yellow;
26 + }
27 +
28 + /* th, td 텍스트 위치, 여백*/
29 + th, td{
30 + text-align: center;
31 + padding: 8px;
32 + }
33 +
34 + /* 짝수번째 열에 색상 부여*/
35 + tr:nth-child(even){
36 + background-color: lightgray;
37 + }
38 +
39 + /* 열 마우스 위로 드랍시 색상*/
40 + tr:hover {
41 + background-color: gray;
42 + }
43 + </style>
44 +</head>
45 + <body>
46 +
47 + <h2> Table_Example</h2>
48 +
49 + <!-- html로 창을 넘어갈시 그 창만 자동스크롤-->
50 + <div style="overflow-x:auto;">
51 + <table>
52 + <!-- 분류를 나타나는 행-->
53 + <tr>
54 + <th> Name </th>
55 + <th> Number </th>
56 + <th> Points </th>
57 + <th> Points </th>
58 + <th> Points </th>
59 + <th> Points </th>
60 + <th> Points </th>
61 + <th> Points </th>
62 + <th> Points </th>
63 + <th> Points </th>
64 + <th>Points</th>
65 + <th>Points</th>
66 + <th>Points</th>
67 + <th>Points</th>
68 + <th>Points</th>
69 + <th>Points</th>
70 + <th>Points</th>
71 + <th>Points</th>
72 + <th>Points</th>
73 + <th>Points</th>
74 + </tr>
75 +
76 + <!-- 1번째 열-->
77 + <tr>
78 + <td>SEO</td>
79 + <td>1</td>
80 + <td>30</td>
81 + <td>40</td>
82 + <td>50</td>
83 + <td>60</td>
84 + <td>70</td>
85 + <td>80</td>
86 + <td>90</td>
87 + <td>100</td>
88 + <td>50</td>
89 + <td>30</td>
90 + <td>20</td>
91 + <td>10</td>
92 + <td>50</td>
93 + <td>60</td>
94 + <td>30</td>
95 + <td>10</td>
96 + <td>20</td>
97 + <td>20</td>
98 + </tr>
99 +
100 + <!-- 2번째 열-->
101 + <tr>
102 + <td>Park</td>
103 + <td>2</td>
104 + <td>60</td>
105 + <td>30</td>
106 + <td>80</td>
107 + <td>90</td>
108 + <td>100</td>
109 + <td>20</td>
110 + <td>10</td>
111 + <td>20</td>
112 + <td>50</td>
113 + <td>100</td>
114 + <td>60</td>
115 + <td>70</td>
116 + <td>60</td>
117 + <td>80</td>
118 + <td>90</td>
119 + <td>40</td>
120 + <td>50</td>
121 + <td>40</td>
122 + </tr>
123 +
124 + <!-- 3번째 열 -->
125 + <tr>
126 + <td>Cho</td>
127 + <td>3</td>
128 + <td>80</td>
129 + <td>20</td>
130 + <td>30</td>
131 + <td>10</td>
132 + <td>20</td>
133 + <td>40</td>
134 + <td>50</td>
135 + <td>60</td>
136 + <td>50</td>
137 + <td>60</td>
138 + <td>80</td>
139 + <td>100</td>
140 + <td>20</td>
141 + <td>30</td>
142 + <td>60</td>
143 + <td>70</td>
144 + <td>80</td>
145 + <td>50</td>
146 + </tr>
147 + </table>
148 + </div>
149 + </body>
150 +</html>