[ HTML ] TABLE 에 대해 알아보자

가장 기본적인 테이블에 대해서 알아보도록 하겠습니다.

■ 먼저 가장 기본적인 테이블 태그는 아래와 같습니다.

<table border>
<tr>
<td>
희야의 웹하우스
</td>
</tr>
</table>

위와 같이 태그를 적용하면 결과물은

이렇게 나오게 됩니다.

---

■ 가로로 테이블 칸을 늘이고 싶다면

<table border>
<tr>
<td>
희야의웹하우스
</td>
<td>
http://heeya1004.tistory.com/
</td>
</tr>
</table>

이렇게 하시면 됩니다.

<td> 글자 </td> 이렇게 반복 하시면 옆으로 칸을 계속 늘일 수 있습니다.

---

■ 반대로 세로로 칸 수를 늘이고싶다면

<table border>
<tr>
<td>
희야의웹하우스
</td>
</tr>
<tr>
<td>
http://heeya1004.tistory.com/
</td>
</tr>
</table>

이렇게 하시면 됩니다.

<tr><td> 글자 </td></tr>을 계속 반복 하면, 아래로 칸 수를 늘릴 수 있습니다.

---

가장 기본이 되는 테이블 태그에 대해서 알아보았습니다.
아무런 장식은 없지만, 뼈대가 되므로 꼭 알아두세요 ^^

<table> 태그의 속성

값과 의미

border

border="1" 과 같이 지정하면 1픽셀의 테두리선이 생깁니다. 테두리선이 보이지 않게 하려면 이 속성을 생략하거나 border="0"으로 지정하면 됩니다.

align

align 에는 left, center, right 중하나의 값을 넣을 수 있습니다. 표 전체가 화면상의 어느 부분에 배치되는가를 결정합니다.

width / height

표의 넓이와 높이를 픽셀 또는 화면 비율로 지정합니다. width="400" 이라고 하면 400 픽셀 넓이의 표가, width="50%"라고 하면 사용자 화면 크기의 절반 넓이만큼의 표가 그려집니다.

bgcolor

표 전체에 배경색을 깝니다. 예) bgcolor="red"

background

표 전체에 배경 그림을 삽입합니다. 예) background="heeya.gif"

cellspacing

칸과 칸 사이의 공간을 조정합니다. cellspacing="5"와 같이 지정하면 칸과 칸사이에 5픽셀만큼의 공간이 벌어집니다.

cellpadding

칸 안에서의 여백을 조정합니다. cellpadding="5"와 같이 지정하면 각 칸 안에 글자나 그림이 들어갈 때 경계선으로부터 5픽셀만큼 들어간 위치에 표시됩니다.

bordercolor(익스플로러전용)

표의 테두리선 색상을 지정합니다.

bordercolordark(익스플로러전용)

표의 우변과 하변에 지정한 색상의 그림자를 만듭니다.

bordercolorlight(익스플로러전용)

표의 좌변과 상변에 지정한 색상의 그림자를 넣습니다.

frame

테두리선의 유/무를 지정합니다. void(테두리 없음), hside(위아래만 표시), vside(좌우만 표시) above(위만 표시), below(아래만 표시), lhs(왼쪽만 표시) rhs(오른쪽만 표시), box(상하좌우 모두 표시. border와 동일)

rules

표 안쪽의 칸과 칸 사이의 경계선 유/무를 지정합니다. none(칸 경계선 없음), rows(가로선만 표시), cols(세로선만 표시) group(그룹 경계선만 표시), all(모든 경계선 표시)

hspace / vspace(넷스케이프전용)

표와 주변 글과의 여백을 지정합니다.