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

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

카테고리 : 돈되는 블로그/블로그 관리


티스토리 블로그를 사용하면서 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 이미지주소">
     를 넣어 주시면 테이블의 배경이 변경됩니다.
     웹색상표를 첨부합니다. 색상표의 내용이 많아 파일로 첨부하니 다운 받으셔서 사용하시기 바랍니다.
?

    라. 넓이와 높이
  - 
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을 활용하여 셀을 합치고 분리하는 테이블소스의 활용을 이어 포스팅하겠습니다.
 
이글이 마음에 드시는분들은 추천 부탁드립니다.
 

댓글을 달아 주세요

  1. Favicon of http://mydascap.tistory.com BlogIcon 마이다스의세상 2010.08.13 19:17  수정/삭제  댓글쓰기

    아익후~ 저는 어려워서 모르겠네요 ㅎㅎ
    암튼 필요한 날이 오면 이 포스팅을 꼭 참조하겠습니다요 ㅎㅎ

    • Favicon of http://verus.tistory.com BlogIcon Verus 2010.08.13 20:18  수정/삭제

      필요하신 소스가 있으시면 방명록이나 댓글로 남겨주시면 도움을 드리도록 하겠습니다. 더쉽게 쓰지못해서 이해가 어려우신가봐요 ㅠㅠ

  2. Favicon of http://passionlife.tistory.com BlogIcon Creative Life 2010.08.13 20:15  수정/삭제  댓글쓰기

    이제 조금 감이 잡혀가는 것 같아요. 한 번 시도해봐야겠어요..

  3. Favicon of http://happynori.tistory.com BlogIcon @wookiis 2010.08.13 20:32  수정/삭제  댓글쓰기

    오... 설명 자세한걸요? 잘 읽었습니답~!

  4. Favicon of http://vburning.tistory.com BlogIcon 뻐닝 2010.09.03 16:57  수정/삭제  댓글쓰기

    잘보고 갑니다. HTML은 넘무 어려워요.

    • Favicon of http://verus.tistory.com BlogIcon Verus 2010.09.13 20:55  수정/삭제

      html 언어를 너무 성급하게 다가가시기 보다는 천천히 한번 둘러보세요- 조금씩 알아가는 맛이 너무나 즐거워요!

  5. Favicon of https://saintpcw.tistory.com BlogIcon 이카루스83 2011.08.02 20:38 신고  수정/삭제  댓글쓰기

    워낙 .. 저런 소스랑 태그는 잘 몰라서........활용해보고 싶네요...ㅎ

  6. Favicon of https://wincomii.tistory.com BlogIcon 윈컴이 2011.08.03 17:34 신고  수정/삭제  댓글쓰기

    저는 div를 많이 써서 테이블은 아직 잘 모르겠어요 ^^;;
    추천하고 갑니다 ㅎㅎ

  7. Favicon of https://theuranus.tistory.com BlogIcon 소인배닷컴 2011.08.04 01:18 신고  수정/삭제  댓글쓰기

    컥... 저한테는 아직 어렵네요... = =;

  8. Favicon of http://ellekwanga.tistory.com BlogIcon 엘레광아 2011.08.06 07:47 신고  수정/삭제  댓글쓰기

    나중에 저도 한번 해봐야겠네요^^;
    추천하고 갑니다~

  9. Favicon of https://sweetcherry.tistory.com BlogIcon 임토리 2011.08.06 23:40 신고  수정/삭제  댓글쓰기

    아시는게 많네요.. 저는 잘 몰라서 티스토리에디션 이용하고 그냥 제공되는거 쓰고있답니다..ㅋㅋ

    • Favicon of https://tvdusdo.tistory.com BlogIcon 연애가중매 2011.08.07 08:24 신고  수정/삭제

      임토리님! 티스토리 에디션에서 제공하는 그대로 사용하시는 것도 참좋은 방법이신거 같아요. 거기에 html을 조금만 더 손봐주시면 훨씬 깔끔해질꺼같은생각이 ..ㅎㅎ

  10. Favicon of https://fbpark.tistory.com BlogIcon 참새날다 2011.08.07 07:34 신고  수정/삭제  댓글쓰기

    딱 필요한 소스이네요~ ,,,,, 나중에 저도 한번 해봐야겠어요 ~ 많이 알지는 못해도 시키면 시키는 대로 잘 하는 편에 속하는 수준입니다. ㅎㅎㅎㅎㅎ 좋은 하루 되세요.

  11. Favicon of https://jongamk.tistory.com BlogIcon 핑구야 날자 2011.08.07 07:35 신고  수정/삭제  댓글쓰기

    색상표는 거끔사용 합니다 좋은 정보 검사해요

  12. Favicon of https://fallstory.tistory.com BlogIcon 단풍story 2011.08.08 15:42 신고  수정/삭제  댓글쓰기

    제브로그에 댓글남겨주신거보고 놀러왓습니다 . 이런글 직접다올리시는건가요?

    오;; 블로그 경력이 꽤되셧나보네요.. 저는 블로그만든지는 꽤됫지만 ㅋㅋ

    방문자가 개속안올라; 요즘다시 시작하고잇습니다.. 자주놀러와주세요 ㅋㅋ

    • Favicon of https://tvdusdo.tistory.com BlogIcon 연애가중매 2011.08.10 09:51 신고  수정/삭제

      방문자 올리는게 일이아닌듯한데 .. 방문자에 너무 신경쓰면 그 또한 스트레스가 되는거갓아요.
      닉네임이 참 이쁘시네요~

  13. Favicon of https://cherryboy.tistory.com BlogIcon 체리보이 2011.08.08 19:18 신고  수정/삭제  댓글쓰기

    블로그 꾸미기 관련 좋은 정보네요~ ^^

  14. Favicon of https://lifeisgood.tistory.com BlogIcon 굳라이프 2011.08.24 11:37 신고  수정/삭제  댓글쓰기

    좋은 정보 잘 보고 갑니다. 시간 나면 응용해 봐야겠다는 생각이 듭니다!!

  15. Favicon of http://ikcokr.tistory.com BlogIcon 익넷 2011.08.28 06:31 신고  수정/삭제  댓글쓰기

    오오... 그렇군요... 잘배우고 갑니다.. 추천요.. *^^

  16. Favicon of https://sunnysideupegg.tistory.com BlogIcon gigglinggreen 2011.10.26 21:10 신고  수정/삭제  댓글쓰기

    HTML 에서 많이 쓰이는 Table에 대해서 헤깔리는 부분을 잘 정리해 주셨네요..ㅋㅋ

    뷰옷 꾸욱.. 화이팅...중매님..^^~

Powerd by TalkBlog Tistory, designed by 한밤의 TV연애