본문 바로가기

HTML 테이블 명령어 종류! 웹 페이지에서 표를 만드는 방법

일상의 작은 발견 2024. 11. 8.
반응형

HTML 테이블을 만드는 데 사용되는 주요 태그와 속성을 알아봅니다. table, tr, td, th 등의 기본 태그부터 고급 기능까지 쉽게 설명합니다.

 

HTML 테이블 명령어 종류
HTML 테이블 명령어 종류

 

HTML 테이블의 기본 구조

HTML에서 테이블을 만들 때 가장 기본이 되는 태그는 <table>입니다. 이 태그로 테이블의 시작과 끝을 나타냅니다. 테이블 안에는 행과 열로 구성된 셀들이 있는데, 이를 만들기 위해 다음과 같은 태그들을 사용합니다.

태그 설명
<tr> 테이블의 행(row)을 만듭니다.
<td> 테이블의 일반 셀(데이터)을 만듭니다.
<th> 테이블의 제목 셀을 만듭니다. 보통 굵은 글씨로 표시됩니다.

 

테이블 구조를 개선하는 태그들

태그 설명
<thead> 테이블의 헤더 부분을 그룹화합니다.
<tbody> 테이블의 본문 부분을 그룹화합니다.
<tfoot> 테이블의 footer 부분을 그룹화합니다.
<caption> 테이블의 제목이나 설명을 추가합니다.

 

테이블 셀 병합하기

속성 설명
colspan 열을 병합합니다.
rowspan 행을 병합합니다.

 

테이블 스타일링

속성 설명
border 테이블의 테두리를 설정합니다.
width 테이블의 너비를 설정합니다.
height 테이블의 높이를 설정합니다.

 

접근성을 고려한 테이블 만들기

속성 설명
scope <th> 태그에 사용되며, 해당 제목이 행에 대한 것인지 열에 대한 것인지 명시합니다.
headers <td> 태그에 사용되며, 관련된 <th> 태그의 id를 지정합니다.

 

HTML 테이블은 단순해 보이지만, 다양한 태그와 속성을 활용하면 복잡한 데이터도 효과적으로 표현할 수 있습니다. 테이블을 만들 때는 항상 데이터의 구조와 의미를 잘 전달할 수 있도록 신경 쓰는 것이 중요합니다.

 

 

반응형

댓글