[CSS] 티스토리에서 글 작성할때 테이블의 CSS활용

아래 글은[Seevaa님] 블로그에서 퍼온 글 입니다.

참고용으로 해당 내용의 스타일은 적용되어 있지 않습니다.

티스토리(또는 테터툴즈, 텍스트큐브)에서 글을 작성할 때 표(테이블)를 작성하기가 쉽지 않습니다. BlogAPI를 활용하는 것도 방법이 되겠습니다만, 저처럼 웹상에서 바로 작성하는 경우가 대부분이라는 생각에...

글작성시 이지웍모드에선 표(테이블)를 만들기 기능이 없고, html모드에서 작성해서 수정하거나 해야합니다. 또한 글을 작성하다보면 다른곳의 표를 긁어서 붙여넣기할 경우 많은데, 이경우도 붙여넣기한 테이블이 깨지거나하면 다시 수정을 해줘야 하는 경우가 다반사죠, 특히나 테이블같은 건 스타일부분이 같이 섞이면 소스가 복잡해져서 html모드에서 해결하려면 펜잘하나 먹어야됩지요. 그나마 이지웍모드에서 할 수 있는 '테이블 모양의 수정정도'도 왠만한 인내가 없으면 활용할 수 없는 정도여서, 표를 이용한 포스팅에 애를 먹은 적이 한두번 있으리라 생각되는군요. 이같은 불편함은 개선되리라 믿으며, CSS를 활용해서 보다 간편하게 테이블을 표현하는 방법을 적어봅니다.

간단히 말하면, 테이블의 내용과 기본 골격만 html모드에서 작성하고 나중에 발행한 포스트에서 원하는 모습으로 보이게끔 테이블의 모양을 CSS에 넣어두는겁니다.

먼저, 아래와 같이 테이블 모양을 CSS에 추가합니다. 그냥 기본적으로 회색으로 보이게 설정 해봅니다.

.article table.normalTable { border-collapse:collapse; clear:both; width:100%; border:1px solid #ccc;}

.article table.normalTable tr th { border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:5px; background:#eee;}

.article table.normalTable tr td { border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:3px;}

.article table.normalTable tr:hover { background:#eee;}

그다음 글 작성할때마다 아래와 같이 꼭 필요한 부분만 html모드에서 작성하고, 테이블의 클래스를 지정해줍니다. 다른곳에서 긁어 온 경우는 번거롭지만 테이블골격과 데이터부분만 빼고 style이 들어가는 부분은 없애줍니다.

<table class="normalTable">

	<thead>

		<tr><th>Section</th><th><a href="http://seevaa.net/">seevaa.net</th></tr>

	</thead>

	<tbody>

		<tr><td>Website Grade</td><td>92</td></tr>

		<tr><td>Google Page Rank</td><td>4</td></tr>

		<tr><td>Traffic Rank</td><td>1,463,450</td></tr>

		<tr><td>Blog Rank</td><td>7,745</td></tr>

		<tr><td>Inbound Links</td><td>140,109</td></tr>

		<tr><td>del.icio.us Bookmarks</td><td>2</td></tr>

		<tr><td>Google Indexed Pages</td><td>2,180</td></tr>

	</tbody>

</table>

예(*IE는 새로고침F5 한번해주는 센스)

Section	seevaa.net
Website Grade	92
Google Page Rank	4
Traffic Rank	1,463,450
Blog Rank	7,745
Inbound Links	140,109
del.icio.us Bookmarks	2
Google Indexed Pages	2,180

어떻게 보면 두번 일하는 것처럼 번거롤수 있지만 몇번 이렇게 쓰다보면 매번 테이블에 매달리는 것보다 편합니다. 또한 여러가지 테이블모양을 클래스로 CSS에 넣어두었다가 그때그때 class만 바꿔줘도 되고, 스킨이 바뀌면 바뀐 스킨에 어울리게 CSS에 클래스설정만 수정해주시면 되니까요~
나아가 꼭 테이블 뿐 아니라, 자주 사용하는 style표현들도 CSS에 넣어두고 그때그때 클래스만 지정해주는 식의 글작성을 하는 것도 좋겠지요~

클래스만 바꾼 예

Section	seevaa.net
Website Grade	92
Google Page Rank	4
Traffic Rank	1,463,450
Blog Rank	7,745
Inbound Links	140,109
del.icio.us Bookmarks	2
Google Indexed Pages	2,180