html 테이블(<table>태그) 총정리 예제

웹 퍼블리싱/HTML5

html 테이블(<table>태그) 총정리 예제

욕심많은 햄톨 2023. 12. 22. 16:10

table은 예전에 css가 발달하지 않았을 때는 레이아웃용으로 쓰였다.

하지만 지금은 절대 레이아웃용이 아닌 표를 렌더링하고자 할 때 쓰여야 한다.

<table> : 표의 영역을 감싸는 용도.

<tr> : 행

<th>, <td> : 열 (th는 제목용으로 쓰이며 두꺼운 글자로 표시된다.)

table 코드를 작성할 때는 태그로 가이드를 잡아야 수월한데 행 태그 다음 열 태그를 작성하는 것이 좋다.

테이블 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        table {
            border-collapse: collapse; /* 테두리 사이 여백 제거 */
        }
        td {
            border: 1px solid red; /* 표의 테두리 생성 */
            padding: 10px;
        }
        th {
            border: 1px solid red;
            padding: 10px;
        }

    </style>
</head>
<body>
    <table>
        <caption>데이터 타입과 값</caption> <!-- 표의 제목 -->
        <colgroup> <!-- col은 열들을 공통적으로 정의하는 컬럼. span은 연속되는 열 수 -->
            <col> <!-- 첫 번째 열 -->
            <col style="background-color: tomato;" span="2"> <!-- 두 번째~세 번째 열 -->
        </colgroup>
        <thead> <!-- thead, tbody, tfoot으로 영역을 나눔. 레이아웃에는 영향x -->
        <tr>
            <th colspan="3" id="th-data">데이터</th> <!-- colspan은 열 병합. 행을 병합하려면 rowspan -->
        </tr>
        <tr>
            <td></td>
            <th abbr="Type" scope="col" headers="th-data">타입</th> <!-- abbr은 칸의 의미를 나타내는 약어. scope는 누구의 머리글 칸인지 나타냄. -->
            <th abbr="Value" scope="col" headers="th-data">값</th> <!-- headers는 th에 id를 명시하고 그 아이디 값을 headers값에 적으면 id가 있는 th에 종속됨을 나타냄. -->
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>알파벳</td>
            <td>A</td>
        </tr>
        <tr>
            <td>2</td>
            <td>숫자</td>
            <td>7</td>
        </tr>
        </tbody>
        <!-- <tfoot>
        </tfoot> -->
    </table>
</body>
</html>

결과)

728x90