HTML_03) 표 태그
jaemeon's note
HTMLCSSJavaScript
HTML_03) 표 태그
2025. 9. 20. 20:21

학습 목표

  • HTML 표 태그의 기본 구조와 각 요소의 역할 이해
  • 기본적인 테이블 생성 방법과 스타일링 기법 습득
  • colspan과 rowspan 속성을 활용한 고급 테이블 구조 구현
  • 시맨틱 테이블 구조(thead, tbody)의 중요성과 활용법 학습

<HTML 표의 기본 개념>

HTML 표(Table)는 행(row)과 열(column)로 구성된 2차원 데이터 구조다. 웹 문서에서 정형화된 자료를 정리하고 표현할 때 핵심적인 역할을 한다.

- 표 구성 요소

표의 기본 구조:

  • 행(Row): 수평 방향의 데이터 줄
  • 열(Column): 수직 방향의 데이터 줄
  • 셀(Cell): 행과 열이 교차하는 지점의 데이터 영역

- 기본 표 태그

<!--
    표 : 웹 문서에서 자료를 정리할 때 주로 사용
         행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 함.
    <table></table> : 기본적인 표를 생성해주는 태그
    <tr></tr> : 한 행을 나타내는 태그
    <th></th> : 제목셀을 나타내는 태그
    <td></td> : 일반셀을 나타내는 태그
-->

태그별 상세 설명:

태그 역할 특징

<table> 표 전체 영역 정의 모든 표 관련 태그의 최상위 컨테이너
<tr> 표의 행(row) 정의 Table Row의 줄임말
<th> 제목 셀 정의 Table Header의 줄임말, 굵은 글씨 + 중앙 정렬
<td> 일반 데이터 셀 정의 Table Data의 줄임말, 일반 텍스트 + 왼쪽 정렬

<기본 테이블 생성>

- 간단한 표 만들기

기본적인 표 만들기

휴대폰의 종류
모델명 제조사 홈페이지
갤럭시 S22 삼성전자 https://www.samsung.com/sec/
아이폰16 애플 https://www.apple.com/kr/?afid=p240%7Cuc~p872_kw1808&cid=aos-kr-kwna-Brand-nbs 
<h1>기본적인 표 만들기</h1>
<table border="1">
    <caption><b>휴대폰의 종류</b></caption>
    <tr>
        <th>모델명</th>
        <th>제조사</th>
        <th>홈페이지</th>
    </tr>
    <tr>
        <td>갤럭시 S22</td>
        <td>삼성전자</td>
        <td>https://www.samsung.com/sec/</td>
    </tr>
    <tr>
        <td>아이폰16</td>
        <td>애플</td>
        <td>https://www.apple.com/kr/?afid=p240%7Cuc~p872_kw1808&cid=aos-kr-kwna-Brand-nbs</td>
    </tr>
</table>

실행 결과:

  • border="1": 표에 1픽셀 두께의 테두리 적용
  • <caption>: 표 제목을 상단에 표시 (굵은 글씨로 강조)
  • <th>: 헤더 셀이 굵은 글씨로 중앙 정렬되어 표시
  • <td>: 데이터 셀이 일반 텍스트로 왼쪽 정렬되어 표시

- caption 태그의 역할

<caption> 태그는 표의 제목이나 설명을 제공하는 중요한 요소다. 스크린 리더와 같은 보조 기술이 표의 내용을 이해하는데 도움을 준다.

<행과 열 병합 속성>

- colspan과 rowspan 개념

HTML 표에서는 셀 병합을 통해 복잡한 레이아웃을 구현할 수 있다.

<!--
    셀(th, td)태그의 속성을 이용해서 행 또는 열을 병합할 수 있음.
    
    colspan = "2" : 2개의 열을 병합
    rowspan = "2" : 2개의 행을 병합
-->

병합 속성 상세:

  • colspan: Column Span의 줄임말, 수평 방향(열) 병합
  • rowspan: Row Span의 줄임말, 수직 방향(행) 병합

- 복합 병합 테이블 예시

<h3>이력서</h3>
<table border="1">
    <tr>
        <td width="130" height="130" colspan="2" rowspan="2">사진</td>
        <td width="80">이름</td>
        <td width="200">Jaemeon</td>
    </tr>
    <tr>
        <td>연락처</td>
        <td>010-1234-5678</td>
    </tr>
    <tr>
        <td height="50" width="70">주소</td>
        <td colspan="3">경기도 xxx xxxx xxxx</td>
    </tr>
    <tr>
        <td>자기소개</td>
        <td colspan="3">안녕하세요. 저는 Jaemeon입니다. 저는 코딩을 매우 열심히 공부했습니다.
            안녕하세요. 저는 Jaemeon입니다. 저는 코딩을 매우 열심히 공부했습니다.
            안녕하세요. 저는 Jaemeon입니다. 저는 코딩을 매우 열심히 공부했습니다.
            안녕하세요. 저는 Jaemeon입니다. 저는 코딩을 매우 열심히 공부했습니다.
            안녕하세요. 저는 Jaemeon입니다. 저는 코딩을 매우 열심히 공부했습니다.
        </td>
    </tr>
</table>

실행 결과:

  1. 첫 번째 셀: colspan="2" rowspan="2"
    • 2개 열과 2개 행을 동시에 병합 (2x2 영역)
    • 사진 영역으로 사용
  2. 주소 행: colspan="3"
    • 3개 열을 수평으로 병합
    • 긴 주소 텍스트를 위한 충분한 공간 확보
  3. 자기소개 행: colspan="3"
    • 3개 열을 수평으로 병합
    • 긴 자기소개 텍스트를 위한 넓은 영역

- 셀 크기 지정 속성

<td width="130" height="130">사진</td>

크기 지정 방법:

  • width: 셀의 너비 지정 (픽셀 단위)
  • height: 셀의 높이 지정 (픽셀 단위)
  • 참고: 현재는 CSS로 스타일링하는 것이 권장됨

<시맨틱 테이블 구조>

- thead와 tbody의 활용

<table border="1">
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jaemeon</td>
            <td>20</td>
            <td>경기도 </td>
        </tr>
        <tr>
            <td>Jaemeon</td>
            <td>20</td>
            <td>경기도 </td>
        </tr>
        <tr>
            <td>Jaemeon</td>
            <td>20</td>
            <td>경기도 </td>
        </tr>
        <tr>
            <td>Jaemeon</td>
            <td>20</td>
            <td>경기도 </td>
        </tr>
    </tbody>
</table>

- 시맨틱 태그의 장점

구조적 의미 제공:

  • <thead>: 테이블의 헤더 영역을 명시적으로 정의
  • <tbody>: 테이블의 본문 데이터 영역을 명시적으로 정의
  • <tfoot>: 테이블의 푸터 영역 정의 (예시에는 없지만 활용 가능)

실무에서의 이점:

  1. CSS 스타일링 용이: 헤더와 본문에 각각 다른 스타일 적용
  2. JavaScript 조작 편의: DOM 탐색과 데이터 처리 최적화
  3. 웹 접근성 향상: 스크린 리더가 테이블 구조 인식
  4. 인쇄 최적화: 긴 테이블 인쇄 시 헤더 반복 표시 가능

<테이블 활용 시나리오>

- 데이터 표현에 적합한 경우

테이블 사용이 권장되는 상황:

  • 스프레드시트 형태의 데이터 (성적표, 가격표 등)
  • 비교 표 (제품 사양 비교, 요금제 비교 등)
  • 통계 데이터 (월별 매출, 지역별 인구 등)
  • 일정표나 시간표

- 레이아웃 용도 사용 금지

과거에는 테이블을 레이아웃 용도로 사용했지만, 현재는 다음 이유로 권장되지 않음:

  • 시맨틱 의미 훼손: 표가 아닌 데이터를 표로 마크업
  • 웹 접근성 저해: 스크린 리더가 잘못된 정보 전달
  • 반응형 디자인 어려움: 모바일 환경에서 복잡한 테이블 구조 처리 곤란

정리 및 요약

HTML 테이블은 구조화된 데이터를 표현하는 핵심 도구다. 단순한 격자 구조를 넘어서 의미적으로 정확한 마크업을 통해 접근성과 사용성을 높일 수 있다.

 

핵심 포인트:

  • 기본 구조: table → tr → th/td의 계층적 구성
  • 병합 속성: colspan(열 병합), rowspan(행 병합)으로 복잡한 레이아웃 구현
  • 시맨틱 구조: thead, tbody, tfoot으로 의미적 구분
  • 웹 접근성: caption, scope 속성을 통한 스크린 리더 지원

'HTMLCSSJavaScript' 카테고리의 다른 글

JavaScript_01) 변수  (0) 2025.09.22
HTML_05) 하이퍼링크 태그, 입력 양식 및 Form 태그  (0) 2025.09.22
HTML_04) 미디어, 영역 태그  (0) 2025.09.22
HTML_02) 목록 태그  (0) 2025.09.19
HTML_01)글자태그  (0) 2025.09.18

티스토리툴바