-
2020.09.22 #TILTIL(today I learned) 2020. 9. 22. 22:36
오늘도 html 4 버전으로 표를 만들었다. html 4 복습이라 생각하고 따라 만들었다. 약 한시간 정도 걸렸고 html은 금방 만들 수 있었다. CSS 여백 넣는 것이 가장 오래 걸린다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="greenfee.css"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>greenfee(html4)</title>
</head>
<body>
<table class="type1" summary="회원별 각종 사용료 별 주중 주말 요금">
<caption><span>그린피 회원별 이용요금 표</span></caption>
<colgroup>
<col style="width:155px">
<col style="width:155px">
<col>
<col>
</colgroup>
<thead>
<tr>
<th colspan="2">구분</th>
<th>주중</th>
<th>주말</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4">그린피</th>
<th>정회원</th>
<td>60,000<span>원</span></td>
<td>65,000<span>원</span></td>
</tr>
<tr>
<th>가족회원</th>
<td>60,000<span>원</span></td>
<td>150,000<span>원</span></td>
</tr>
<tr>
<th>지명회원</th>
<td>80,000<span>원</span></td>
<td>
210,000<span>원</span><br>
195,000<span>원</span>
</td>
</tr>
<tr>
<th>비회원</th>
<td>150,000<span>원</span></td>
<td>
210,000<span>원</span><br>
195,000<span>원</span>
</td>
</tr>
<tr>
<th colspan="2">카트사용료</th>
<td colspan="2">80,000<span>원</span></td>
</tr>
<tr>
<th colspan="2">보조원 봉사료</th>
<td colspan="2">120,000<span>원 (팀당)</span></td>
</tr>
<tr>
<th colspan="2">대여료</th>
<td colspan="2">
<b>골프화,퍼터</b>10,000<span>원</span>
<b>대여클럽</b>50,000<span>원</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS
body {
padding:50px;
}
table.type1 {
border-top: 2px solid #bd0000;
border-bottom: 1px solid #e4e4e4;
}
table.type1 thead th {
height: 44px;
color: #585858;
font-size: 15px;
}
table.type1 tbody th,
table.type1 tbody td {
padding: 16px 21px;
border-top: 1px solid #e4e4e4;
}
table.type1 tbody th {
border-right: 1px solid #e4e4e4;
background: #fafafa;
font-weight: normal;
}
table.type1 tbody td {
border-left: 1px solid #e4e4e4;
text-align: right;
font-size: 17px;
color: #333;
font-weight: bold;
}
table.type1 tbody td[colspan] {
text-align: center;
}
table.type1 tbody td span {
padding-left: 6px;
font-weight: normal;
}
table.type1 tbody td b {
padding:0 18px 0 66px;
font-size: 15px;
color: #585858;
}
table.type1 tbody td b:first-child {
padding-left: 0;
}
결과
'TIL(today I learned)' 카테고리의 다른 글
2020.09.25 #TIL (0) 2020.09.26 2020.09.24 #TIL (0) 2020.09.24 2020.09.21 #TIL (0) 2020.09.22 2020.09.18 #TIL (0) 2020.09.19 2020.09.17 #TIL (0) 2020.09.18