티스토리 블로그를 알면 황금이 보인다! 테이블편

티스토리 블로그를 사용하면서 HTML태그 중 Table태그와 Div태그를 가장많이 사용하는 것 같습니다. Table태그(이하, 테이블이라함)를 사용하면 블로그를 깔끔하게 정리하여 꾸미는데 큰 도움을 줍니다. 활용가능한 Table소스를 자세히 알아보겠습니다.

1. 기본 Table소스

표를 만드는 가장 기초적인 소스는 Table을 통해서 만들 수 있습니다. 모든소스는 <table>과 같이 <>안에 집어넣어 사용되어지며 테이블과 관련된 소스는 <table>로 테이블을 열었을 시에는 </table>로 테이블을 닫아주셔야 합니다.

1) 최상위 소스 <Table>
 테이블을 만들때에는 <Table>을 통해 그 "표"의 시작을 엽니다.
 이 테이블 소스안에는 총 테이블의 너비와 높이,여백,선,바탕색등을 지정할 수 있습니다.
  가. 여백과 셀간격
  - Cellpading Cellspacing은 테이블을 사용하면 필수적으로 알아야하는 소스입니다. 그림을 통하
      여쉽게 정리해 드리겠습니다.
 

      사용법은 다음과 같습니다. <Table cellpading="원하시는 수" cellspancing="원하시는 수">
      로 사용하시면 됩니다. 일반적으로 스킨안에서 정렬을 위한목적으로 사용하는경우에는 주로 두개의
      값을 "0"으로 주고 사용합니다.
  나. Style
  - style과 관련된 소스는 여러가지가 존재합니다. 그중 사용되어지는 소스를 정리해 보았습니다.

    다. 배경
  - Bgground는 테이블의 배경을 관리하는 부분으로 <table bgground="색상값 or 이미지주소">
     를 넣어 주시면 테이블의 배경이 변경됩니다.
     웹색상표를 첨부합니다. 색상표의 내용이 많아 파일로 첨부하니 다운 받으셔서 사용하시기 바랍니다.

?

색상표.txt

    라. 넓이와 높이
  - width는 테이블 안의 넓이을 주관합니다. <table width="숫자 ex.100">
     height는 테이블 안의 높이를 주관합니다.<table height="84">
    

?  지금까지 나열한 각각의 소스들은 <table>이라는 소스안에 집어넣어 사용하시면 됩니다.
   예 <Table width="400" height="80" style="border-collapse:collapse; border:1px
   #EAEAEA solid;"><tr><td align="center"></td></tr></table>

위의 소스로 완성된 예제 표입니다.

2) <Tr>소스

 테이블 안의 소스 <tr>은 테이블안의 줄을 관리합니다. 쉬운예제로

<table><tr><td></td></tr><tr><td></td><tr></table>은 2줄의 테이블이 만들어 지는것이지요. <tr>로 열리고 </tr>로 닫힌 부분이 2군데 이죠? * 모든 <tr>안에는 <td>가 들어가 줘야합니다.

3) <Td>소스

 테이블 안의 소스 <td>는 테이블안의 테이블을 관리합니다,

 <table><tr><td></td><td></td></tr></table>은 1줄의 2칸의 테이블이 만듭니다. ?

 보기와 같은 테이블이 만들어집니다,

    가. 정렬

  - align는 셀 안의 가로정렬을 주관합니다. <td align="left or center or right>로 사용

     되어지며 left는 좌정렬 center는 가운데 right는 우정렬입니다.

     valign는 샐 안의 세로정렬을 하게 해주며 사용법은 위과 같고 "top middle bottom"으로

     정렬효과를 만들 수 있습니다.

테이블과 관련된 태그중 기본 Table소스를 정리하였습니다. 다음포스팅에서는 clospan과 rowspan을 활용하여 셀을 합치고 분리하는 테이블소스의 활용을 이어 포스팅하겠습니다.
 이글이 마음에 드시는분들은 추천 부탁드립니다.