표 만들기

필수 태그

table 태그

테이블을 생성합니다.

• border: 테이블의 테두리 두께를 설정합니다.
• cellspacing: 셀 간의 간격을 설정합니다.
• cellpadding: 셀 내부의 여백을 설정합니다.
  (HTML5에서는 속성 대신 CSS 사용 권장)

<table>
    <!-- 테이블 내용 -->
</table>

caption 태그

테이블의 제목을 정의합니다.

• caption-side : 제목의 위치를 설정합니다 (예: top, bottom).

<table>
    <caption>학생 목록</caption>
    <!-- 테이블 내용 -->
</table>

tr (Table Row) 태그

테이블의 행을 정의합니다.

<tr>
    <td>첫 번째 데이터</td>
    <td>두 번째 데이터</td>
</tr>

th (Table Header) 태그

테이블의 헤더 셀을 정의하며, 기본적으로 굵게 표시됩니다.

• scope : 셀의 범위를 정의합니다 (예: col, row, colgroup, rowgroup).

<tr>
    <th scope="col">이름</th>
    <th scope="col">나이</th>
</tr>

td (Table Data) 태그

테이블의 일반 셀을 정의합니다.

<tr>
    <td>홍길동</td>
    <td>20</td>
</tr>

rowspan

셀을 수직으로 병합할 때 사용합니다.

<tr>
    <td rowspan="2">병합된 셀</td>
    <td>첫 번째 데이터</td>
</tr>
<tr>
    <td>두 번째 데이터</td>
</tr>

colspan

셀을 수평으로 병합할 때 사용합니다.

<tr>
    <td colspan="2">병합된 셀</td>
</tr>
<tr>
    <td>첫 번째 데이터</td>
    <td>두 번째 데이터</td>
</tr>

thead (Table Head) 태그

테이블의 헤더 섹션을 정의합니다.

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

tfoot (Table Foot) 태그

테이블의 푸터 섹션을 정의합니다.

<table>
    <tfoot>
        <tr>
            <td colspan="2">총계</td>
        </tr>
    </tfoot>
</table>

tbody (Table Body) 태그

테이블의 본문 섹션을 정의합니다.

<table>
    <tbody>
        <tr>
            <td>데이터 1</td>
            <td>데이터 2</td>
        </tr>
    </tbody>
</table>

col 태그

테이블의 열에 대한 속성을 정의합니다.

• span : 여러 열을 지정합니다.
• style : 열의 스타일을 정의합니다.

<table>
    <col style="background-color: yellow;">
    <col style="background-color: lightblue;">
    <tr>
        <td>데이터 1</td>
        <td>데이터 2</td>
    </tr>
</table>

colgroup 태그

테이블의 하나 이상의 열에 대한 속성을 정의합니다.

<table>
    <colgroup span="2"></colgroup>
    <tr>
        <td>데이터 1</td>
        <td>데이터 2</td>
    </tr>
</table>