테이블관련 태그

테이블은 표를 작성할 때 사용하는 태그이다. <table></table>로 정의하며 게시판 목록을 작성할 때 사용한다

 

 

 

태그명	설명
<table>	테이블을 작성하려면 <table>태그로 시작하고 </table>로 종료해야 한다.
<tr>	테이블의 row를 추가하기 위해 사용
<th>	테이블의 제목을 작성하기 위해 사용
<td>	테이블의 한 셀을 표현할 때 사용

 

속성

속성명	설명
border	테이블 테두리 작성
bgcolor	표의 배경색을 표현
width	표의 너비(HTML5부터 CSS로 적용권장 – 속성을 지원하지 않음)
height	표나 셀의 높이
colspan	컬럼 방향으로 합칠 셀의 개수
rowspan	row방향으로 합칠 셀의 개수

 

 

아래와 같은 표를 삽입하기 위해 <tr> 4개와 각 <tr>마다 3개의 <td>를 선언해야 작성할 수 있다

 

 

표에 삽입된 두 번째 row와 세 번째 row의 컬럼 에서 같은 문자열이 나오는 부분을 하나의 셀로만 표현하고 싶다면 row의 방향으로 셀을 병합해서 표현해야 한다. 셀을 병합하는 방법은 병합할 셀이 시작하는 <td>태그에서 “rowspan”을 이용해서 병합할 셀의 개수를 지정해야 한다. 또한 시작 셀을 남기고 나머지는 <td>를 정의할 필요가 없으므로 삭제한다.

아래와 같이 코드를 수정한다

 

실행하면 셀이 병합된 것을 확인할 수 있다

 

 

row방향 뿐 아니라 컬럼 방향으로도 병합할 수 있다. 컬럼 방향으로 병합하는 경우 “colspan”이라는 속성을 적용해야 한다. “rowspan”을 적용하는 방법과 동일하다

마지막 <tr>태그 아래 다음과 같은 코드를 추가한다

 

실행하면 다음과 같이 컬럼 방향으로 셀이 병합된 row가 추가된 것을 확인할 수 있다