table, tr, td 속성

웹문서 제작에 가장 숙련도를 요구하는 태그로 TABLE 태그가 있다. 웹문서에서 TABLE 태그는 내용물 전체의 배치를 위한 뼈대를 제공하고, 내용물을 직접 나타내기도 하며, 이미지와 더불어 디자인의 중요한 한 요소를 차지하고 있다. 웹문서 제작에 있어 많은 시간을 들이는 부분이기도 하고 문서 내 태그 중에 대부분을 차지하기도 한다. 실제 서비스되는 웹문서에서 모든 내용물은 테이블 속에 담겨져 있다고 가정하면 된다. 표는 줄(row)과 칸(column) 그리고 셀(cell)로 이루어지고, 셀은 줄과 칸이 만나 이루어진 곳으로 표의 내용이 들어가는 곳을 의미한다. 

 

table 태그는 표의 시작과 끝을 정의하고

tr 태그는 표의 행을 정의하며(table row)

td 태그는 행을 이루는 열을 정의한다(table data).

 

따라서 위의 태그들은 홀로 사용될 수 없고 <td>~</td>가 모여 <tr>~</tr> 을 구성하고 <tr> ~ </tr>가 모여 </table>~</table> 을 이루게 된다.

가장 간단한 표라도 다음과 같이 한줄 한칸 짜리 표로 이루어지며 표에 들어갈 내용은 <td> ~</td> 사이에만 들어갈 수 있다.

<table>

표

<tr>

한줄

<td>

한칸

표 속에 들어갈 내용은 여기!!!

</td>

</tr>

</table>

 

 

TABLE Element
align	left | center | right   테이블 전체의 수평 정렬 Default : left 예) <table align="center">
background	uri   테이블 전체의 배경 그림 예) <table background="../images/bg_hor_line.gif">
bgcolor	테이블의 배경색 예) <table bgcolor="silver"> , <table bgcolor="#EEEECC">
border	절대 단위,    테이블의 border(테두리) 두께 예) <table border="3">
height	테이블의 높이 예) <table height="100%">
width	절대단위 | 상대단위   테이블 전체의 가로 크기 예) <table width="600"> , <table width="90%">
nowrap	테이블 전체 셀의 text의 줄바꿈 방지 예) <table nowrap> , <tr nowrap="nowrap">
cellpadding	절대단위   테이블 Cell border와 Cell 속의 내용물과의 거리, 기본값 1 예) <table cellpadding="5">
cellspacing	절대단위   테이블 Cell 간의 거리와 Cell과 테이블 border와의 거리, 기본값 2 예) <table cellspacing="5">
bordercolor	테이블 Cell의 테두리 색 예) <table bordercolor="lightgreen">
bordercolordark	테이블 우측과 하단의 border 색 예) <table bordercolordark="red" bordercolorlight="blue">
bordercolorlight	테이블 좌측과 상단의 border 색 예) <table bordercolordark="red" bordercolorlight="blue">

TR(Table Row) Element
align	테이블 행의 Cell 또는 Cell 들 속의 내용물의 수평 정렬 예) <tr align="center">
valign	테이블 행의 Cell 또는 Cell 들 속의 내용물의 수직 정렬 예) <tr valign="baseline">
bgcolor	테이블 행의 Cell 또는 Cell 들 속의 내용물의 배경색 예) <tr bgcolor="silver"> , <tr bgcolor="#EEEECC">
height	행의 높이 예) <tr height="25">
width	행의 너비 예) <tr height="25" width="150">
nowrap	행속의 셀의 text의 줄바꿈 방지 예) <tr nowrap> , <tr nowrap="nowrap">
bordercolor	행속 Cell 좌우상하의 border 색 예) <tr bordercolor="red">
bordercolordark	행속 Cell 우측과 하단의 border 색 예) <tr bordercolordark="red" bordercolorlight="blue">
bordercolorlight	행속 Cell 좌측과 상단의 border 색 예) <tr bordercolordark="red" bordercolorlight="blue">

TD(Table Data) Element
align	Cell 속의 내용물의 수평 정렬 예) <td align="center">
valign	Cell 속의 내용물의 수직 정렬 예) <td valign="baseline">
background	uri   테이블 Cell의 배경 그림 예) <table background="../images/bg_hor_line.gif">
bgcolor	Cell 속의 내용물의 배경색 예) <td bgcolor="silver"> , <td bgcolor="#EEEECC">
height	Cell의 높이 예) <td height="25">
width	Cell의 너비 예) <td height="25" width="150">
nowrap	Cell 속의 text의 줄바꿈 방지 예) <td nowrap> , <td nowrap="nowrap">
colspan	수평으로 병합할 column(열)의 개수(span) 예) <td colspan="3">
rowspan	수직으로 병합할 row(행)의 개수(span) 예) <td rowspan="2">

 

 

테이블 여백 조절하기

 

cellpadding : 테두리 선과 내용 사이의 여백 조절

cellspacing : 셀과 셀 사이의 여백 조절

 

cellpadding=0 / cellspacing=0

 

cellpadding=20 / cellspacing=10

 

cellpadding=0 / cellspacing=30