II. 텍스트 - 5. 표 스타일

Hush 2022. 6. 3. 10:13

caption-side : 표 제목의 위치 정하기

표 제목은 <caption> 태그를 이용해 캡션으로 표시한다.

caption-side 속성을 이용해 제목을 표의 위쪽에 표시할 지, 표의 아래쪽에 표시할 지 선택할 수 있다.

caption-side : top | bottom

border : 표에 테두리 그리기

표 바깥 테두리와 셀 테두리를 각각 지정합니다.

다음 예제는 border속성을 이용해 바깥 테두리는 1px의 검은색 실선으로, 셀 테두리는 1px의 검은색 점선으로 표시한 것이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            table {
                caption-side: bottom;
                border: 1px solid red;
            }
            td, th {
                border : 1px dotted blue;
                padding: 10px;
                text-align : center;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>선물용과 가정용 상품 구성</caption>
            <thead>
                <th>용도</th>
                <th>중량</th>
                <th>개수</th>
                <th>가격</th>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">선물용</td>
                    <td>3kg</td>
                    <td>11~16과</td>
                    <td>35,000원</td>
                </tr>
                <tr>
                    <td>5kg</td>
                    <td>18~26과</td>
                    <td>52,000원</td>
                </tr>
                <tr>
                    <td rowspan="2">가정용</td>
                    <td>3kg</td>
                    <td>11~16과</td>
                    <td>30,000원</td>
                </tr>
                <tr>
                    <td>5kg</td>
                    <td>18~26과</td>
                    <td>47,000원</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

border-spacing : 셀 사이의 여백을 지정

표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생긴다.

border-spacing 속성을 사용하면 셀과 셀 사이의 여백을 조절할 수 있다.

border-spacing : 수평거리 수직거리

두 개의 값이 같다면 1개만 지정해도 된다.

border-collapse : 표와 셀 테두리 합치기

앞에서 살펴본 것처럼 <table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시된다.

이때 두 줄로 그냥 둘 것인지, 아니면 합쳐서 하나로 표시할 것인지 결정하는 것이 border-collapse 속성이다.

이 속성은 <table> 태그에 적용되는 스타일에만 지정하면 된다.

종류	설명
collapse	표와 셀의 테두리를 합쳐 하나로 표시한다
separate	표와 셀의 테두리를 따로 표시한다. 기본값이다.

border 속성의 예제에 border-collapse 속성을 적용해 보자.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            table {
                caption-side: bottom;
                border: 1px solid black;
                border-collapse: collapse;
            }
            td, th {
                border : 1px dotted black;
                padding: 10px;
                text-align : center;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>선물용과 가정용 상품 구성</caption>
            <thead>
                <th>용도</th>
                <th>중량</th>
                <th>개수</th>
                <th>가격</th>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">선물용</td>
                    <td>3kg</td>
                    <td>11~16과</td>
                    <td>35,000원</td>
                </tr>
                <tr>
                    <td>5kg</td>
                    <td>18~26과</td>
                    <td>52,000원</td>
                </tr>
                <tr>
                    <td rowspan="2">가정용</td>
                    <td>3kg</td>
                    <td>11~16과</td>
                    <td>30,000원</td>
                </tr>
                <tr>
                    <td>5kg</td>
                    <td>18~26과</td>
                    <td>47,000원</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

저작자표시 (새창열림)