HTML 문서에서 표를 만들 때 사용하는 표 관련 테이블 태그들에 대해서 정리한 포스팅입니다.
HTML 태그 정리표 보러가기
HTML 태그 정리표 HTML 주요 태그들 정리
HTML 태그들은 각 구분 별로 시맨틱 태그, 텍스트 관련 태그, 이미지와 비디이 등 멀티미디어 관련 태그, 입력 양식 태그 등이 있습니다. HTML 태그 정리표로 한눈에 보기 편하게 정리해보았습니다.
kdevitworld.blogspot.com
테이블 관련 용어
표는 데이터 정리에 자주 사용되는 형태의 양식입니다. 테이블 및 그리드라고도 불리고 있는데요. 간략하게 표를 이루는 구성항목에 대해서 정리해보았습니다.
표의 시작과 끝 <table> 그리고 이름 <caption>
HTML에서 표를 작성할 때는 표가 시작되는 부분 <table>과 끝나는 부분 </table> 표기하고 그 안에 표의 구조를 작성하면 됩니다. 그리고 표의 이름을 지정하는 <caption>을 달 수 있으며 위치는 <table> 바로 밑에 명시해줘야 합니다.
<table> <caption>표 제목</caption> </taable>행을 나타내는 <tr>과 <th>, <td>
HTML의 테이블 태그는 행을 우선으로 해서 표의 구조를 만들어 냅니다. <tr>과 </tr> 사이에 <td>와 <th>를 사용해서 데이터를 넣으면 1개의 행이 구성되는데, <td>의 개수만큼 열의 개수가 늘어나는 것입니다.
<th>는 <td>와는 조금 다르게 행 및 열의 제목 역할을 해서 데이터가 조금 진하게 표시됩니다.
| 제목 열1 | 제목 열2 | 제목 열3 |
| 데이터 1 | 데이터 2 | 데이터 3 |
- 기본 HTML만 작성 시에는 CSS를 적용하지 않아 구분선이 나오지 않습니다.
표의 구조를 지정하는 <thead>, <tbody>, <tfoot>
표의 제목 열(행) 지정 및 데이터를 이루는 바디 영역, 하단의 푸터 영역을 나눌 수가 있습니다. 이렇게 구조를 나누는 이유는 스타일 적용 시에 각 구조별로 다른 스타일을 적용하거나 데이터의 양이 많아서 한 번에 100개씩만 데이터를 보여준다고 가정할 때, 표의 제목 부분과 하단 부분은 고정시키고, 데이터 영역만 바뀔 수 있게 적용하기 위함입니다.
| 태그 | 내용 |
| <thead> | 표의 제목 영역 |
| <tbody> | 표의 본문 영역 |
| <tfoot> | 표의 하단 영역(합계 및 요약) |
셀 병합에 사용되는 rowspan, colspan 속성
엑셀 등 스프레드 시트에서 사용되는 셀 병합을 사용할 때는 <td>, <th>에 열 병합 시 colspan, 행 병합 rowspan의 속성을 사용하면 됩니다.
<td colspan = "열 병합 셀 개수">데이터</td> <td rowspan = "행 병합 셀 개수">데이터</td>병합을 진행할 때, 병합으로 영향받는 <tr> 태그는 빈 공간으로 놔두고 작성하시면 됩니다.
예를 들어 표의 행 길이가 2인 표에서 첫 번째 행 2개를 병합했을 때, 두 번째 행에는 1개의 데이터만 입력하면 된다는 뜻으로 아래 이미지를 참고하시면 될 것 같습니다.
테이블 태그를 이용한 예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table, tr, th, td { border: 1px solid #000; border-collapse : collapse; } th, td { padding : 10px 20px; } .r_Align { text-align : right; } </style> </head> <body> <table> <caption> 재고 리스트 </caption> <tr> <th>구분</th> <th>품번</th> <th>품명</th> <th>수량</th> </tr> <tr> <th rowspan="2">제품</th> <td>A-1</td> <td>제품-1</td> <td class="r_Align">1,000</td> </tr> <tr> <td>A-2</td> <td>제품-2</td> <td class="r_Align">500</td> </tr> <tr> <th rowspan="2">상품</th> <td>Z-1</td> <td>상품-1</td> <td class="r_Align">123</td> </tr> <tr> <td>Z-2</td> <td>상품-2</td> <td class="r_Align">777</td> </tr> </table> </body> </html>예전에는 table 태그를 레이아웃을 구축하는 용도로 많이 사용했지만
요즘엔 table 태그는 단순한 테이블 영역을 위해 사용된다.
1. table 태그의 기본 구조
table 태그는 단독으로 사용되진 않는다.
자식 요소로 thead, tbody, colgroup, caption, tr, th, td 등의 여러 태그들과 함께 쓰인다.
가장 기본적인 구조는 하나 이상의 tr, th, td 태그들과 함께 구성이 된다.
| 수학 | 100점 |
| 국어 | 80점 |
위의 소스는 가장 기본적인 구조인 tr, th, td 태그만 사용해서 적용한 모습이다.
<table> <thead> <tr> <th>과목</th> <th>점수</th> </tr> </thead> <tbody> <tr> <td>수학</td> <td>100점</td> </tr> <tr> <td>국어</td> <td>80점</td> </tr> </tbody> </table>위와 같은 소스라면 thead 영역에 tbody의 각 영역들에 대한 제목을
tbody 영역에는 thead의 제목에 대한 정보나 데이터가 노출될 수 있도록 한다.
2. tr 태그
tr태그는 table 태그에서 필수요소이며 th, td로 이루어져 있고
하나의 행(row)을 나타낸다.
즉, tr이 사용되면 tr 안에 있는 요소들은 하나의 행으로 처리가 된다.
3. th 태그
th는 테이블에서 요소별 제목을 나타낸다.
<table> <tr> <th>이름</th> <td>철수</td> </tr> </table>위의 소스에서 본다면 이름 : 철수가 노출되는 테이블에서
해당 행의 제목은 '이름' 이라는 정보이며 제목에 대한 데이터는 '철수' 라는 것을 알 수 있다.
주로 사용하는 속성은 rowspan, colspan, scope 등이 있다.
3-1. rowspan : 행 병합
<table> <tr> <th rowspan="2">이름</th> <td>철수</td> </tr> <tr> <td>영희</td> </tr> </table>| 철수 |
| 영희 |
3-2. colspan : 열 병합
<table> <tr> <th colspan="2">이름</th> </tr> <tr> <td>철수</td> <td>영희</td> </tr> </table>| 철수 | 영희 |
3-3. scope : th에서만 사용할 수 있는 속성으로 해당 th가 어떤 데이터와 연결이 되고 있는지 명시할 수 있다.
<table> <tr> <th scope="col">이름</th> <th scope="col">나이</th> </tr> <tr> <td>철수</td> <td>10살</td> </tr> <tr> <td>영희</td> <td>11살</td> </tr> </table>위의 경우 이름, 나이 라는 제목이 각각
이름은 철수, 영희가 포함된 열을
나이는 10살, 11살이 포함된 열의 제목으로 존재한다는 것을 명시한다.
scope 속성은 화면상 드러나는 시각적 효과는 없지만 스크린 리더와 같은 장치에서 데이터를 읽을 때 활용이 된다.
4. td 태그
th태그에서 정의한 제목 영역에 대한 데이터 및 정보를 나타낸다.
주로 사용하는 속성은 th와 비슷하게 colspan, rowspan 등을 사용하고
th와는 다르게 scope 속성은 사용할 수 없다. (html5 이전에는 사용할 수 있었다고 한다.)