210521 UIUX WebデザインHTML練習9


<html>
<head>
<title>표 태그</title>
</head>
<body>
    <h1>표 만들기</h1>
    <table border="1">
        <tr>
            <!-- 칸 안에서는 기본으로 좌측정렬이 됨 -->
            <th>1행 1열</th> <td>1행 2열</td> <td>1행 3열</td>
        </tr>
        <tr>
            <td>2행 1열</td> <td>2행 2열</td> <td>2행 3열</td>
        </tr>
    </table>

    <p>=============================================================</p>

    <table border="1" cellspacing="0" cellpadding="10" align="center" width="50%">
        <tr>
            <th></th>
            <th>토요일</th> <th>일요일</th>
        </tr>
        <tr>
            <th>티켓 판매</th> <td>120</td> <td>135</td>
        </tr>
        <tr>
            <th>총 매출</th> <td>600만원</td> <td>675만원</td>
        </tr>
    </table>

    <p>=============================================================</p>

    <table border="1">
        <tr>
            <th>서적명</th> <th>출판사</th> <th>가격</th>
        </tr>
        <tr>
            <td>포토샵</td> <td>제우미디어</td> <td>25,000원</td>
        </tr>
        <tr>
            <td>일러스트레이터</td> <td>제우미디어</td> <td>20,000원</td>
        </tr>
        <tr>
            <td>웹 표준</td> <td>제우미디어</td> <td>28,000원</td>
        </tr>
    </table>

    <p>=============================================================</p>

    <h2>칸 병합</h2>
    <table border="1">
        <tr>
            <td colspan="2">첫 번째 칸</td> 
            <!-- <td>두 번째 칸</td>  -->
        </tr>
        <tr>
            <td>세 번째 칸</td> <td>네 번째 칸</td> 
        </tr>
    </table>

    <h2>칸 병합</h2>
    <table border="1">
        <tr>
            <td rowspan="2">첫 번째 칸</td> <td>두 번째 칸</td> 
        </tr>
        <tr>
            <!-- <td>세 번째 칸</td> -->
            <td>네 번째 칸</td> 
        </tr>
    </table>

    <p>=============================================================</p>

    <table border="1">
        <tr>
            <th>출판사</th> <th>서적명</th> <th>판매부수</th>
        </tr>
        <tr>
            <td rowspan="3">제우미디어</td> <td>포토샵</td> <td>25,000부</td>
        </tr>
        <tr>
            <td>일러스트레이터</td> <td>20,000원</td>
        </tr>
        <tr>
            <td>웹 표준</td> <td>21,000부</td>
        </tr>
        <tr>
            <td colspan="2">평균 판매 부수</td> <td>22,000부</td>
        </tr>
    </table>

    <p>=============================================================</p>

    <table border="1" cellspacing="0">
        <tr>
            <th rowspan="3" colspan="3">항 목</th> <th colspan="3">급 여</th> <th colspan="2">비 급 여</th>
        </tr>
        <tr>
            <th colspan="2">일부 본인부담</th> <th rowspan="2">전액 본인부담</th> <th rowspan="2">선택 진료료</th> <th rowspan="2">선택 진료료 이외</th>
        </tr>
        <tr>
            <th rowspan="3">기본 항목</th> <th colspan="2">진 찰 료</th> <td>5,000</td> <td>8,000</td> <td>0</td> <td>0</td> <td>0</td>
        </tr>
        <tr>
            <th rowspan="2">주사료</th> <th>행위료</th> <td>1,000</td> <td>1,000</td> <td>0</td> <td>0</td> <td>0</td>
        </tr>
        <tr>
            <th>약품비</th> <td>10,000</td> <td>15,000</td> <td>0</td> <td>0</td> <td>1,000</td>
        </tr>
        <tr>
            <th colspan="3">합계</th> <td>16,000</td> <td>24,000</td> <td>0</td> <td>0</td> <td>1,000</td>
        </tr>
    </table>
</body>
</html>