티스토리 블로그를 알면 황금이 보인다! 테이블편
2011. 8. 2. 19:56
돈되는 블로그/블로그 관리
티스토리 블로그를 알면 황금이 보인다! 테이블편
카테고리 : 돈되는 블로그/블로그 관리
티스토리 블로그를 사용하면서 HTML태그 중 Table태그와 Div태그를 가장많이 사용하는 것 같습니다. Table태그(이하, 테이블이라함)를 사용하면 블로그를 깔끔하게 정리하여 꾸미는데 큰 도움을 줍니다. 활용가능한 Table소스를 자세히 알아보겠습니다.
| 1. 기본 Table소스 |
표를 만드는 가장 기초적인 소스는 Table을 통해서 만들 수 있습니다. 모든소스는 <table>과 같이 <>안에 집어넣어 사용되어지며 테이블과 관련된 소스는 <table>로 테이블을 열었을 시에는 </table>로 테이블을 닫아주셔야 합니다.
1) 최상위 소스 <Table>
테이블을 만들때에는 <Table>을 통해 그 "표"의 시작을 엽니다.
이 테이블 소스안에는 총 테이블의 너비와 높이,여백,선,바탕색등을 지정할 수 있습니다.
가. 여백과 셀간격
- Cellpading Cellspacing은 테이블을 사용하면 필수적으로 알아야하는 소스입니다. 그림을 통하
여쉽게 정리해 드리겠습니다.
1) 최상위 소스 <Table>
테이블을 만들때에는 <Table>을 통해 그 "표"의 시작을 엽니다.
이 테이블 소스안에는 총 테이블의 너비와 높이,여백,선,바탕색등을 지정할 수 있습니다.
가. 여백과 셀간격
- Cellpading Cellspacing은 테이블을 사용하면 필수적으로 알아야하는 소스입니다. 그림을 통하
여쉽게 정리해 드리겠습니다.
사용법은 다음과 같습니다. <Table cellpading="원하시는 수" cellspancing="원하시는 수">
로 사용하시면 됩니다. 일반적으로 스킨안에서 정렬을 위한목적으로 사용하는경우에는 주로 두개의
값을 "0"으로 주고 사용합니다.
나. Style
- style과 관련된 소스는 여러가지가 존재합니다. 그중 사용되어지는 소스를 정리해 보았습니다.
로 사용하시면 됩니다. 일반적으로 스킨안에서 정렬을 위한목적으로 사용하는경우에는 주로 두개의
값을 "0"으로 주고 사용합니다.
나. Style
- style과 관련된 소스는 여러가지가 존재합니다. 그중 사용되어지는 소스를 정리해 보았습니다.
다. 배경
- Bgground는 테이블의 배경을 관리하는 부분으로 <table bgground="색상값 or 이미지주소">
를 넣어 주시면 테이블의 배경이 변경됩니다.
웹색상표를 첨부합니다. 색상표의 내용이 많아 파일로 첨부하니 다운 받으셔서 사용하시기 바랍니다.
- 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을 활용하여 셀을 합치고 분리하는 테이블소스의 활용을 이어 포스팅하겠습니다.
이글이 마음에 드시는분들은 추천 부탁드립니다.
이글이 마음에 드시는분들은 추천 부탁드립니다.
'돈되는 블로그 > 블로그 관리' 카테고리의 다른 글
| [블로그 수익] 애드센스에서 단가오른 카우리로! (14) | 2012.02.14 |
|---|---|
| 티스토리 블로그를 알면 황금이 보인다! 테이블편 심화 (11) | 2012.02.06 |
| 티스토리 블로그를 알면 황금이 보인다! 테이블편 (30) | 2011.08.02 |
| 이제는 블로그 수익을 위해 어디로가야할까? (39) | 2011.08.01 |
| 티스토리 블로그 웹폰트로 가독성을 올리자 - 첫번째 (6) | 2011.07.29 |
| 티스토리 블로그 웹폰트로 가독성을 올리자 - 두번째 (5) | 2011.07.29 |
댓글을 달아 주세요
아익후~ 저는 어려워서 모르겠네요 ㅎㅎ
암튼 필요한 날이 오면 이 포스팅을 꼭 참조하겠습니다요 ㅎㅎ
필요하신 소스가 있으시면 방명록이나 댓글로 남겨주시면 도움을 드리도록 하겠습니다. 더쉽게 쓰지못해서 이해가 어려우신가봐요 ㅠㅠ
이제 조금 감이 잡혀가는 것 같아요. 한 번 시도해봐야겠어요..
감사합니다! 꼭 성공하세요~
오... 설명 자세한걸요? 잘 읽었습니답~!
감사합니다. 도움이 되셨으면 좋겠어요.
잘보고 갑니다. HTML은 넘무 어려워요.
html 언어를 너무 성급하게 다가가시기 보다는 천천히 한번 둘러보세요- 조금씩 알아가는 맛이 너무나 즐거워요!
워낙 .. 저런 소스랑 태그는 잘 몰라서........활용해보고 싶네요...ㅎ
필요한게 있으시면 제가 한개한개 차분히 도와드리겠습니다!
저는 div를 많이 써서 테이블은 아직 잘 모르겠어요 ^^;;
추천하고 갑니다 ㅎㅎ
역시 앞서나가시는 원컴이님은 다르시네요!
윈컴이에요~
컥... 저한테는 아직 어렵네요... = =;
저도 많이알고싶습니다.ㅠㅠ
그래도 필요한게 있으시다면 꼭! 제가 알려드리고 싶어요!
나중에 저도 한번 해봐야겠네요^^;
추천하고 갑니다~
하실때 안되시는게 많으시면 제가 많이도와드릴게요~
아시는게 많네요.. 저는 잘 몰라서 티스토리에디션 이용하고 그냥 제공되는거 쓰고있답니다..ㅋㅋ
임토리님! 티스토리 에디션에서 제공하는 그대로 사용하시는 것도 참좋은 방법이신거 같아요. 거기에 html을 조금만 더 손봐주시면 훨씬 깔끔해질꺼같은생각이 ..ㅎㅎ
딱 필요한 소스이네요~ ,,,,, 나중에 저도 한번 해봐야겠어요 ~ 많이 알지는 못해도 시키면 시키는 대로 잘 하는 편에 속하는 수준입니다. ㅎㅎㅎㅎㅎ 좋은 하루 되세요.
블로그 보니까 참 잘꾸미시고 포스팅도 참 좋으시던걸요?^^;
색상표는 거끔사용 합니다 좋은 정보 검사해요
색상표가 많은 도움이 되시나요?
저는 .. 필요색상을 외우고 다녀요! 하하;;
제브로그에 댓글남겨주신거보고 놀러왓습니다 . 이런글 직접다올리시는건가요?
오;; 블로그 경력이 꽤되셧나보네요.. 저는 블로그만든지는 꽤됫지만 ㅋㅋ
방문자가 개속안올라; 요즘다시 시작하고잇습니다.. 자주놀러와주세요 ㅋㅋ
방문자 올리는게 일이아닌듯한데 .. 방문자에 너무 신경쓰면 그 또한 스트레스가 되는거갓아요.
닉네임이 참 이쁘시네요~
블로그 꾸미기 관련 좋은 정보네요~ ^^
좋은 정보가 되셨다니 기쁩니다!
좋은 정보 잘 보고 갑니다. 시간 나면 응용해 봐야겠다는 생각이 듭니다!!
오오... 그렇군요... 잘배우고 갑니다.. 추천요.. *^^
HTML 에서 많이 쓰이는 Table에 대해서 헤깔리는 부분을 잘 정리해 주셨네요..ㅋㅋ
뷰옷 꾸욱.. 화이팅...중매님..^^~