테이블 테그 <table>
--------------------------------------------------------------------------------
HTML문서를 만들때 표를 사용하는것은 가장중요하다고 해도 과언이 아닙니다. 대부분의 웹페이지의 소스를 보면 표로 그 구성(전체틀)을 구성하게 됩니다.
즉 이미지나 글자 등을 배치할때 그리고 실제 표모양을 보여줄때도 아주아주 중요하게 쓰이는 태그입니다.
예를 들어 웹페이지에 올릴 이미지를 만들었습니다. 하지만 이미지를 통째로 올리자니 그 용량이 너무너무 큽니다. (로딩속도가 장난아닙니다 -_-;;) 이럴때는 이미지를 적당한 용량으로 잘라서 저장한후에 이미지 조각조각들을 표에 빈틈없이 배치해 하나로 합쳐줍니다.
어렵냐구요? 아니요.. 어렵지는 않습니다.
지금까지의 예제에서는 글자나 그림등을 되는대로 배치했지만 이제부터는 원하는 곳에 배치할수 있습니다.
표도 아주 쉽게 만들어 낼수 있습니다.
--------------------------------------------------------------------------------
<Table><Tr><Td>
표를 만들어 주는 명령어는 <Table>태그 입니다. <Table>표에는 행을 담당하는 <Tr>태그, 그리고 <Tr>태그안에 열을 담당하는 <Td>태그가 사용됩니다. 실제 표안에 들어가는 내용들은 결국 <Td>태그안에 들어가게 됩니다.
무슨소린지 모르시겠다구요??? 테이블의 구성은 아래와 같다는 말씀입니다.
<Table>-------------------------------------- 표
<Tr>------------------------------------- 표의 첫째줄
<Td>--------------------------------- 첫째줄의첫째칸
내용-------------------------------표안에 첫재줄의 첫째칸에 들어갈내용
</Td>
</Tr>
</Tabel>
표를 만들때도 다양한 속성을 설정할수 있습니다.
하지만 <Table>, <Tr>, <Td>태그만다 적용가능한 속성이 약간씩 차이가 있으므로 나누어서 설명해보겟습니다.
먼저 <Tabel>, <Tr>, <Td> 모두에 적용할수 있는 속성
- width : 표,줄,칸의 너비설정하며 그 값으로 픽셀이나 %를 가집니다.
- height : 표,줄,칸의 높이 설정하며 그 값으로 픽셀이나 %를 가집니다.
- bgcolor : 표,줄,칸에 배경색 설정하며 그 값으로 색이름이나 RGB코드를 가집니다.
- background : 표,줄,칸의 배경에 그림을 삽입하며 그 값으로 이미지경로를 가집니다.
- align : 표,줄,칸를 정렬하며 그 값으로 left, right, center를가집니다.
두번째로 <Table>에만 적용되는 속성
-border : 표의 테두리 두께를 설정하며 그 값으로 픽셀값을 가집니다.(기본값은1)
-cellspacing : 셀과 셀 간격을 설정하며 그 값으로 픽셀값을 가집니다.(기본값은1)
-cellpadding : 셀과 문장과의 여백을 설정하며 그 값으로 픽셀값을 가집니다.
(기본값은1)
-bordercolorlight : 표의 테두리에 밝은 영역의 색을 설정하며 그 값으로 색이름이나
RGB코드를 가집니다.
-bordercolordark : 표의 테두리에 어두은 영역의 색을 설정하며 색이름이나 RGB코드를
가집니다.
세번째로 <Tr>, <Td>에만 적용되는 속성
- colspan : 표의 칸을 합쳐주는 속성으로 그 값으로 합칠 칸수를 가집니다.
- rowspan : 표의 줄을 합쳐주는 속성으로 그 값으로 합칠 줄수를 가집니다.
- valign : 셀안의 내용을 정렬해주는 속성으로 그 값으로 top, middle, bottom을
가집니다.
| Table><Tr><Td>태그의 속성과 인자값을 정리해 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Table><Tr><Td>태그의 사용예제 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
'▣컴퓨터 활용팁' 카테고리의 다른 글
| 웹 사이트 오류 메시지 (HTTP 오류) (0) | 2009.09.12 |
|---|---|
| Internet Explorer 8에서 교차 사이트 스크립팅 방지 메시지가 나타나며 페이지가 올바르게 작동하지 않아요 (0) | 2009.09.07 |
| 한글 문서의 표를 엑셀로 변환하기 (0) | 2009.07.14 |
| 여름·장마철 PC 관리 요령 (0) | 2009.06.27 |
| 컴퓨터가 너무 리부팅만 합니다 ,원도우 리부팅 해결방법 (0) | 2009.06.19 |
