[CSS] ch04-22. tb4

22_tb.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>

<style>
    @import "../css/22_tb.css";
</style>
</head>

<body>
    <table id="tb1">
        <caption>주요 국가 통화율</caption>
        <tr>
            <th>통화명</th>
            <th>매매기준율</th>
            <th>전일대비</th>
            <th>등락률</th>
        </tr>
        <tr>
            <th>미국(USD)</th>
            <td>1,090,80</td>
            <td>1.20</td>
            <td>-0.11%</td>
        </tr>
        <tr>
            <th>일본(JPY 100)</th>
            <td>1,359.59</td>
            <td>5.58</td>
            <td>-0.41%</td>
        </tr>
        <tr>
            <th>중국(CNY)</th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <table id="tb2">
        <caption>주요 국가 통화율</caption>
        <tr>
            <th>통화명</th>
            <th>매매기준율</th>
            <th>전일대비</th>
            <th>등락률</th>
        </tr>
        <tr>
            <th>미국(USD)</th>
            <td>1,090,80</td>
            <td>1.20</td>
            <td>-0.11%</td>
        </tr>
        <tr>
            <th>일본(JPY 100)</th>
            <td>1,359.59</td>
            <td>5.58</td>
            <td>-0.41%</td>
        </tr>
        <tr>
            <th>중국(CNY)</th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

 

22_tb.css

@CHARSET "UTF-8";
table{
    border-collapse: seperate;
    margin-bottom: 20px;
}
#tb1 th, #tb1 td{
    border: 1px solid black;
    empty-cells: show;/*빈칸의 값을 보여주곘다. 기본값*/
}
#tb2 th, #tb2 td{
    border: 1px solid black;
    empty-cells: hide;
}
caption{
    caption-side: bottom;    
}