<table></table>태그
웹 문서에서 자료를 정리할 때 주로 사용하는 태그로 행과 열로 이루어진 표 형식으로 나타난다. 행과 열이 만나는 지점을 셀이라고 표현한다.
테이블 태그는 기본적으로는 구분선이 없다. border 속성으로 라인을 표시할 수 있지만 보통 css에서 처리한다. width, height로 테이블 전체의 넓이, 높이를 설정할 수 있다. 설정 단위는 픽셀이다.
table>tr(행)>td(열) 순서로 부자 관계를 갖는다.
<table border="1" width="300" height="300">
<!-- 1번째 행 -->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- 2번째 행 -->
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<!-- 3번째 행 -->
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
💡 border 속성으로 구분선을 설정하면 이중선처럼 표현이 되는데 td 태그와 table 태그마다 구분선이 생기기 때문이다.
table 태그 구조 및 <th></th> 태그
열에 대한 제목을 표시하는 태그로 해당 태그의 텍스트 노드에 작성한 문자는 중앙 정렬 및 굵게 표시가 적용된다.
<thead>
<tr>
<th>구분</th>
<th>메뉴이름</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>양식</td>
<td>돈까스</td>
<td>10,000</td>
</tr>
<tr>
<td>중식</td>
<td>짜장면</td>
<td>9,000</td>
</tr>
<tr>
<td>한식</td>
<td>김치찌개</td>
<td>7,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>3종류</td>
<td>26,000</td>
</tr>
</tfoot>
<!-- 구역을 나눠놨기 때문에 구역별로 스타일을 지정하는 것이 가능해진다.-->
<style>
thead{
background-color: darkcyan;
}
tfoot{
background-color: darkseagreen;
}
</style>
table 태그는 thead, tbody, tfoot로 구역을 구분할 수 있다. 구조화 시켰을 뿐 외부적으로 표시된 게 달라지진 않는다.
윗 줄은 테이블 정보에 대한 내용을 표시하는 헤더(thead) 영역으로 셀에 대해서 th 태그를 이용할 수 있다. table의 정보를 바디(tbody) 영역에 작성하고 푸터(tfoot) 영역에는 보통 집계된 값을 출력하게 한다.
정보를 구분하기 위해 작성하는 것으로 필수적인 구분은 아니다.
💡 단, tbody는 개발자가 작성하지 않아도 내부적으로 자동으로 부여한다. 실행된 웹페이지 화면에서 검사를 눌러 확인해보면 tbody 태그를 작성하지 않은 테이블 태그 내부에도 자동적으로 선언되어있는 것을 확인할 수 있다.
테이블의 셀(td) 병합
td 태그의 속성으로 td 태그에서만 사용할 수 있다.
rowspan : 행을 합칠 때 사용하는 속성
colspan : 열을 합칠 때 사용하는 속성
<table>
<tbody>
<tr>
<td rowspan="4">구분</td>
<td>이름</td>
<td>가격</td>
</tr>
<!-- tbody>tr>td*3 -->
<tr>
<!-- <td>양식</td> -->
<td>스파게티</td>
<td>12,000</td>
</tr>
<tr>
<!-- <td>한식</td> -->
<td>참치김밥</td>
<td>4,500</td>
</tr>
<tr>
<!-- <td>일식</td> -->
<td>초밥</td>
<td>12,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td colspan="2" align="right">28,500</td>
</tr>
</tfoot>
</table>
(위)병합 전 table, (아래)병합 후 table
caption 태그
테이블의 제목이나 내용을 추가하는 태그로 table 태그 내부의 어느 위치에 작성해도 테이블 위 중앙에 배치된다. 다른 태그를 이용해서 텍스트 노드에 작성한 부분을 꾸밀 수 있다.
<!-- 3*3 테이블을 만들고 1~9까지 수를 출력 -->
<table border="1" width="200" height="200">
<caption>3*3사이즈 테이블</caption>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
figure 태그의 figcaption 태그
figure 태그로 감싸서 사용하는 caption 태그로 caption 태그와 비슷한 기능을 하지만 테이블 앞, 뒤로 위치를 지정해서 사용할 수 있다. 앞에 사용하고 싶은 경우 table 시작 태그 전에 작성하고 뒤에 사용하고 싶은 경우엔 table 종료 태그 뒤에 작성한다.
<figure>
<figcaption>figure는 자동 들여쓰기 된다.</figcaption>
<table>
<tr>
<td><input type="text" placeholder="아이디 입력"></td>
<td><input type="password" placeholder="비밀번호 입력"></td>
<td rowspan="2"><button>로그인</button></td>
</tr>
<tr>
<td colspan="2" align="right">
<button>회원가입</button>
<button>아아디 찾기</button>
<button>비밀번호 찾기</button>
</td>
</tr>
</table>
<figcaption>캡션 위치를 지정할 수 있다.</figcaption>
</figure>
col 태그 및 colgroup 태그
col 태그는 열에 대한 스타일을 적용할 때 사용하는 태그로 caption 태그 뒤, tr, td 태그 전에 작성한다. span 태그를 이용해서 열을 묶어서 사용할 수 있다.
colgroup 태그는 열을 그룹으로 묶어서 스타일을 적용할 때 사용하는 것으로 col 태그 작성 위치와 동일하며 col 태그를 자식 태그로 감싼다.
<p>colgroup 태그를 이용</p>
<table width="400" height="400">
<colgroup>
<col style="background-color: lightpink;"/>
<col style="background-color: indianred;"/>
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
