TIL(today I learned)

2020.09.22 #TIL

노랑세희 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;

}

 

 

 

결과