이번 포스팅에서는 표를 만들 때 사용하는 테이블 태그에 대하여 알아보겠습니다.
테이블 태그도 실제로 작업할때 많이 사용되는 태그이니, 직접 HTML 코드를 작성하면서 읽어보시는 것을 권해드립니다.
1. 테이블 구성 요소
테이블은 표를 만들 때 사용하므로, 표를 생각하시면서 태그와 연관짓는게 좋습니다.
표에는 행과 열이 있는데 행은 가로 방향을 의미하며, 열은 세로 방향을 의미합니다.
사용하다보면 쉽게 헷갈릴 수 있으니 기본 개념을 잘 숙지하는게 좋을 것 같습니다.
이러한 테이블을 구성하는 요소는 다음과 같습니다.
- <table> 태그 : 표를 만드는 태그
- <tr> 태그 : 행을 만드는 태그
- <th> 태그 : 제목 셀을 만드는 태그
- <td> 태그 : 셀을 만드는 태그
<table>
<tr>
<th>순서</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>크기</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<table>
예시 코드를 분석해보면 행을 만드는 <tr> 태그가 2개 들어갔으므로 2행이 되고, 행의 셀이 4개 있기 때문에 4열이 됩니다.
따라서, 예시 코드는 2행 4열의 표가 됩니다.
직접 HTML 코드를 작성하시다보면 표에 테두리가 없어서 표처럼 안보이실 수 있는데요.
<table> 태그는 테두리가 기본 스타일로 적용되어있지 않기 때문에 그렇습니다.
표에 테두리를 넣고 싶다면 CSS를 사용해야 하며, 아래의 코드를 <head> 내부에 넣게 되면 표에 테두리가 생성됩니다.
<style>
th, td {
border: 1px solid #000
}
</style>
추후에 다룰 내용이지만 해석해보자면 <th> 태그와 <td> 태그에 두께가 1px이고 색상이 검정색(#000)인 실선(solid) 스타일을 추가하겠다는 내용입니다.
테이블 코드 작성을 연습하실 때 추가해서 진행해보셔도 괜찮을 것 같습니다.
2. 테이블 구조
웹 접근성을 준수하고 표를 구조적으로 파악하기 위해 도움을 주는 태그들에 대해서 알아보겠습니다.
- <caption> 태그 : 표의 제목을 나타내주는 태그
- <thead> 태그 : 제목 행을 그룹화해주는 태그
- <tbody> 태그 : 본문 행을 그룹화해주는 태그
- <tfoot> 태그 : 바닥 행을 그룹화해주는 태그
- <colgroup> 태그 : 열(col)을 그룹화해주는 태그
- <col> 태그 : 표의 열을 의미하는 태그, 닫는 태그가 없음
<table>
<caption>지출 목록</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>지출 항목</th>
<th>금액</th>
</tr>
</thead>
<tbody>
<tr>
<td>식비</td>
<td>9,000원</td>
</tr>
<tr>
<td>교통비</td>
<td>5,000원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>14,000원</td>
</tr>
</tfoot>
<table>
테이블의 기본 구조를 구성하면 위의 예시와 같으며, <colgroup>, <col>, <tfoot> 태그는 경우에 따라 제외할 수 있습니다.
3. 테이블 속성
테이블 속성에는 웹 접근성을 준수하기 위한 것과 꾸며주는 역할의 속성 등이 있으며, 많이 사용하는 속성들은 다음과 같습니다.
- scope 속성 : <th> 셀이 관련되는 셀의 종류를 명시, 스크린 리더기를 통해 읽을 수 있음 [속성 값 : col(열), row(행), colgroup(열그룹), rowgroup(행그룹)]
- width 속성 : 표의 너비를 정함
- height 속성 : 표의 높이를 정함
- colspan 속성 : 열병합
- rowspan 속성 : 행병합
See the Pen Untitled by nitnal (@nitnal) on CodePen.
위와 속성들을 사용하여 본인이 원하는 형태의 표를 만들어 유용하게 활용할 수 있습니다.
구조가 다른 태그들에 비해 복잡해보일 수 있는데요.
전체적인 테이블 구조 파악과 행과 열을 제대로 구분하는 연습을 하다 보면 능숙하게 사용하실 수 있을 겁니다.
오늘도 읽어주셔서 감사합니다.
좋은 하루 보내세요! :)
'웹 퍼블리싱 > HTML' 카테고리의 다른 글
| 10. 폼 태그 (0) | 2023.04.23 |
|---|---|
| 8. 이미지 태그, 상대경로/절대경로, 리스트 태그 (0) | 2023.04.19 |
| 7. 의미 없는 태그, 앵커 태그 (1) | 2023.04.18 |
| 6. 개발자 도구 (0) | 2023.04.17 |
| 5. 텍스트 태그 (0) | 2023.04.16 |
댓글