테이블(table) 태그

테이블(table) 태그란?

◽ 표(table)를 만들 때 사용하는 태그

1. 기본 구조

1) 기본 구조 관련 태그

태그	설명
table	표를 감싸는 태그
caption	table의 제목이나 설명을 작성하는 태그
tr	표 내부의 행 (table row)
th	행 내부의 제목 셀 (table heading)
td	행 내부의 일반 셀 (table data)

2) 기본 구조 코드 (2행 2열 테이블)

2. table태그에 속성 주기

1) table 태그 속성 정리

속성	설명
border	표 테두리 두께 지정
width	테이블의 가로폭을 설정하는 속성
cellpadding	셀(칸)과 컨텐츠(텍스트, 이미지등)와의 간격 조절(셀의 안쪽 여백)
cellspacing	셀(칸)과 셀(칸)간의 간격 조절(셀의 바깥쪽 여백)

◽ XHTML1.0에서는 웹 표준이지만, HTML5에서는 웹표준이 아님
◽ HTML5에서는 CSS로 위의 속성들을 대체해야 함

2) 코드

3) 결과

3. 열(셀-th, td) 태그에 속성 주기

1) 속성 정리

속성	설명
width	셀의 가로폭을 설정하는 속성
height	셀의 세로폭을 설정하는 속성
align	셀의 컨텐츠(텍스트, 이미지등)를 가로 정렬 시켜주는 속성 : left, right, center
vlign	셀의 컨텐츠(텍스트, 이미지등)를 세로 정렬 시켜주는 속성 : top, middle, bottom

◽ XHTML1.0에서는 웹 표준이지만, HTML5에서는 웹표준이 아님
◽ HTML5에서는 CSS로 위의 속성들을 대체해야 함

2) 코드 및 결과

4. 셀 병합 속성

1) 속성 정리

속성	기능
colspan	같은 행의 칸들을 병합할 때 사용
rowspan	다른 행의 칸들을 병합할 때 사용

◽ XHTML1.0과 HTML5에서 모두 웹 표준

2) colspan 예제 코드 및 결과

3) rowspan 예제 코드 및 결과

5. HTML5에 새로 나온 테이블 행 그룹 태그

1) 행 그룹 태그의 종류

태그	설명
thead	테이블의 제목들을 묶는 그룹 태그
tbody	테이블의 일반적 데이터들을 묶는 그룹 태그
tfoot	테이블의 마지막 아래 부분을 묶는 그룹 태그

2) 코드 및 결과

6. HTML5에 새로 나온 테이블 열 그룹 태그

1) 열 그룹 태그의 종류

태그	설명
colgroup	열을 그룹으로 묶을 수 있도록 해주는 태그
col	colgroup의 자손으로 열단위를 나눌 수 있다.

2) 코드 및 결과

---

🔗참고

• 오쌤의 니가스터디 HTML기초문법 6강 테이블(table)태그

• PoiemaWeb 7. 목록(List)와 표(Table) 형식 표현을 위한 태그