TH, TD elements

<TH>,<TD>
▲ ▶

TABLE로 표의 시작과 끝을 알리고, TR로 행을 결정한 다음에는 각 행에 들어갈 셀을 만들어 준다. 이 때는 테이블에 들어가는 데이터라는 뜻으로 TD(TABLE data)를 셀의 수만큼 만들어준다. 각 셀의 내용은 TD 안에 써 준다. TD는 시작 태그만 써 주면 된다.
간단한 예를 먼저 보자.
<TABLE width = 80% border cellpadding=5>
<TR align = center>
<TD>1행 1번 셀
<TD>1행 2번 셀
<TR>
<TD>2행 1번 셀
<TD>2행 2번 셀
</TABLE>
셀 중에서 한 행이나 열의 제목이 되는 셀은 TD 대신 TH(TABLE HEADer) element를 사용한다. TD와 TH는 모든 면에서 동일하지만 TH는 기본적으로 굵은 글씨로 나오고, 가로 정렬이 중앙이라는 점이 다르다.
<TABLE width = 80% border cellpadding=5>
<TR>
<TH>오늘의 온도
<TH>오늘의 습도
<TR align = right>
<TD>24도
<TD>60%
</TABLE>
속성

align, valign

colspan, rowspan

id, class

TITLE

style

onclick, onmouseup, onmousedown, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

nowrap, width, height, bgcolor

TR의 경우, align과 valign 속성은 한 행 전체에 적용이 되지만, TH와 TD에서는 해당 셀에만 적용된다.
셀 합치기
HTML의 표에서는 셀 분할은 없고, 병합만이 있다. 따라서, 합치기 전 상태의 표를 염두에 두고 행과 셀의 수를 따진 다음, 가로로 합칠 것인지, 새로로 합칠 것인지를 결정한다.
colspan = 숫자
두 개 이상의 셀을 가로 방향(열 병합)으로 합치려고 할 때는 colspan 속성을 넣어주고,
합치려고 하는 셀의 수만큼 숫자를 써 준다.
rowspan = 숫자
두 개 이상의 셀을 새로 방향(행 병합)으로 합치려고 할 때는 rowspan 속성을 넣어주고,
합치려고 하는 셀의 수만큼 숫자를 써 준다.
<TABLE border width = 80%>
<TR>
<TD>1행 1번 셀
<TD>1행 2번 셀
<TR>
<TD colspan = 2>2행 1번 셀
</TABLE>
<P>
<TABLE border width = 80%>
<TR>
<TD rowspan = 2>1행 1번 셀
<TD>1행 2번 셀
<TR>
<TD>2행 1번 셀
</TABLE>
TABLE에서 'nowrap' 태그
표(TABLE)에서 줄바꿈 금지
표에서 내용이 많으면 자동으로 다음 줄로 내려가는데 그것을 방지하기 위해서는
<TH>, <TD>에 <TH nowrap>, <TD nowrap>을 사용하면 줄바꿈을 방지할 수 있습니다.
HTML 실행 결과
줄바꿈가능많은 내용이 있으면 TABLE은 폭에 맞도록 자동으로 다음 줄로 이동합니다.
줄바꿈방지많은 내용이 있어도 nowrap을 사용하면 다음줄로 바꾸지 않습니다.
HTML 내용

줄바꿈가능 많은 내용이 있으면 TABLE은 폭에 맞도록 자동으로 다음 줄로 이동합니다.

줄바꿈방지 많은 내용이 있어도 nowrap을 사용하면 다음줄로 바꾸지 않습니다.

▲ ▶