HTML 테이블 명령어 종류! 웹 페이지에서 표를 만드는 방법
반응형
HTML 테이블을 만드는 데 사용되는 주요 태그와 속성을 알아봅니다. table, tr, td, th 등의 기본 태그부터 고급 기능까지 쉽게 설명합니다.
HTML 테이블의 기본 구조
HTML에서 테이블을 만들 때 가장 기본이 되는 태그는 <table>
입니다. 이 태그로 테이블의 시작과 끝을 나타냅니다. 테이블 안에는 행과 열로 구성된 셀들이 있는데, 이를 만들기 위해 다음과 같은 태그들을 사용합니다.
태그 | 설명 |
---|---|
<tr> |
테이블의 행(row)을 만듭니다. |
<td> |
테이블의 일반 셀(데이터)을 만듭니다. |
<th> |
테이블의 제목 셀을 만듭니다. 보통 굵은 글씨로 표시됩니다. |
테이블 구조를 개선하는 태그들
태그 | 설명 |
---|---|
<thead> |
테이블의 헤더 부분을 그룹화합니다. |
<tbody> |
테이블의 본문 부분을 그룹화합니다. |
<tfoot> |
테이블의 footer 부분을 그룹화합니다. |
<caption> |
테이블의 제목이나 설명을 추가합니다. |
테이블 셀 병합하기
속성 | 설명 |
---|---|
colspan |
열을 병합합니다. |
rowspan |
행을 병합합니다. |
테이블 스타일링
속성 | 설명 |
---|---|
border |
테이블의 테두리를 설정합니다. |
width |
테이블의 너비를 설정합니다. |
height |
테이블의 높이를 설정합니다. |
접근성을 고려한 테이블 만들기
속성 | 설명 |
---|---|
scope |
<th> 태그에 사용되며, 해당 제목이 행에 대한 것인지 열에 대한 것인지 명시합니다. |
headers |
<td> 태그에 사용되며, 관련된 <th> 태그의 id를 지정합니다. |
HTML 테이블은 단순해 보이지만, 다양한 태그와 속성을 활용하면 복잡한 데이터도 효과적으로 표현할 수 있습니다. 테이블을 만들 때는 항상 데이터의 구조와 의미를 잘 전달할 수 있도록 신경 쓰는 것이 중요합니다.
반응형
'블로그 자료' 카테고리의 다른 글
HTML 색상표! 웹 디자인을 위한 완벽 가이드 (2) | 2024.11.08 |
---|---|
구글 애드센스 CTR이란? (3) | 2024.10.30 |
티스토리 블로그 포스팅 수 확인 방법, 티스워드 활용! (8) | 2024.10.05 |
댓글