[HTML]table 태그로 표를 만들어보자!

표를 만드는 태그는 table 태그이다.

 

 

 

table 태그만 사용해서는 이렇게 표의 테두리가 눈에 보이지 않기 때문에,

눈에 보이게 하려면 border 속성 혹은 CSS로 테두리를 지정해줘야 한다.

 

속성값의 숫자가 커질 수록 테두리는 굵어진다.

 

또한 보다시피, table 태그만으로 만들어지는 것이 아니다.

자식 태그인 <tr>,<th>/<td>가 있어야 하는, 서로가 반드시 필요한 관계에 놓여 있다.

 

 

 

<tr> 

table row

표의 행을 만듦

 

<td>

table data

표의 셀을 만듦

 

<th>

table head

표의 헤더 역할, 알아서 굵은 글씨체로 지정된다.

 

<caption>

표의 이름을 달 때 사용하는 태그이다. 표 위 중앙에 자리한다.

 

 

테이블은 우선 행을 먼저 만들고 그 안에 셀을 채우는 형식이다.

그래서 td 태그와 th 태그는 tr 태그의 자식 태그일 수 밖에 없다.

 

 

 

한 편, 비정형 표, 즉 기존에서 벗어난 형식의 표를 만들때 사용하는 td의 속성이 있다.

 

 

<rowspan="n"> n개만큼 세로의 셀을 합함 

<colspan="n"> n개만큼 가로의 셀을 합함

 

 

 

이 외에도 가로와 세로의 길이를 결정하는 width/heigth 속성,

셀의 배경색을 지정할 수 있는 bgcolor 속성,

테두리의 색을 지정할 수 있는 bordercolor 속성 등이 있다.

 

다만 border 속성과 함께 이 속성들은 HTML5에서는 지원하지 않고 있다(heigth 제외). 그래서 되도록 CSS를 활용하는 것이 좋다고 한다.