서현석 / 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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
width: 100%;
}
/* 선택된 항목들에 1px 색상줄 표시 */
table, th, tr, td {
border: 1px solid black;
}
/* th 바탕색상, 글자색상 */
th {
background-color: green;
color:white;
}
/* th 왼쪽에 두꺼운 색깔 선 넣기 */
th {
border-left: 5px solid yellow;
}
/* th, td 텍스트 위치, 여백*/
th, td{
text-align: center;
padding: 8px;
}
/* 짝수번째 열에 색상 부여*/
tr:nth-child(even){
background-color: lightgray;
}
/* 열 마우스 위로 드랍시 색상*/
tr:hover {
background-color: gray;
}
</style>
</head>
<body>
<h2> Table_Example</h2>
<!-- html로 창을 넘어갈시 그 창만 자동스크롤-->
<div style="overflow-x:auto;">
<table>
<!-- 분류를 나타나는 행-->
<tr>
<th> Name </th>
<th> Number </th>
<th> Points </th>
<th> Points </th>
<th> Points </th>
<th> Points </th>
<th> Points </th>
<th> Points </th>
<th> Points </th>
<th> Points </th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<!-- 1번째 열-->
<tr>
<td>SEO</td>
<td>1</td>
<td>30</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>50</td>
<td>30</td>
<td>20</td>
<td>10</td>
<td>50</td>
<td>60</td>
<td>30</td>
<td>10</td>
<td>20</td>
<td>20</td>
</tr>
<!-- 2번째 열-->
<tr>
<td>Park</td>
<td>2</td>
<td>60</td>
<td>30</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>20</td>
<td>10</td>
<td>20</td>
<td>50</td>
<td>100</td>
<td>60</td>
<td>70</td>
<td>60</td>
<td>80</td>
<td>90</td>
<td>40</td>
<td>50</td>
<td>40</td>
</tr>
<!-- 3번째 열 -->
<tr>
<td>Cho</td>
<td>3</td>
<td>80</td>
<td>20</td>
<td>30</td>
<td>10</td>
<td>20</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>50</td>
<td>60</td>
<td>80</td>
<td>100</td>
<td>20</td>
<td>30</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>50</td>
</tr>
</table>
</div>
</body>
</html>