테이블 요소

드디어 오늘은 좀 지루한 기본 태그를 벗어나서 표를 작성하는 시간을 갖겠습니다.

표를 작성 할때는 블록 레벨 요소인 <table>을 사용합니다.

 

표의 기본 구조는 <tr>로 행(table row)을 정의하고, 그 안에 제목 셀(table header cell)인<th>와 데이터 셀(table data cell)인 <td>를 넣은 후에 전체를 <table>로 둘러싸게 됩니다.

 

<table>에는 boarder, width, align 등 여러가지 속성이 있는데 사실 상, 전부 다 외우고 사용하지는 않고 대부분 CSS에서 처리를 합니다.

 

아래 코드를 보시면 <table border = "1">은 테이블에 1의 굵기를  나타내라라는 것입니다.

 

그리고 테이블 위에 <caption>은 제목을 나타냅니다.

 

<thead>, <tbody>, <tfoot>은 그룹핑으로 머리, 몸, 다리 로 나뉘어 집니다.

※ 필수는 아니지만 브라우저에서는 순서에 맞게 인식을 하기 때문에 헷갈리지 않도록 순서에 맞게 작성하시는게 좋습니다.

 

th의 scope에서 "col"은 column을 나타내는 세로방향, "row"는 가로방향을 나타냅니다.

 

 

소스 다운받기 : html5_4_1.html

 

결과를 보시면 다음과 같습니다.

 

 

그러면 셀을 합치고 싶으면 어떻게 해야 할까요?

바로 colspan(열 병합, 가로 셀 합치기)와 rowspan(행 병합, 세로 셀 합치기) 속성을 사용하시면 됩니다.

아래 예제는 열 병합을 사용한 예제 입니다. <td>에 colspan = "2"를 사용한 것은 셀 2칸을 병합 했다는 뜻입니다.

 

 

 

소스 다운받기 : html5_4_2.html

 

아래와 같이 HTML2가 열이 병합이 된거 보이시죠?

 

 

 

 

더 많은 속성들이 있지만 대부분 CSS에서 활용하기 때문에 테이블은 여기서 마치도록 하고 다음에는 앵커에 대해 알아보도록 하겠습니다.