티스토리 표 테이블 테두리 색상 글자크기 꾸미기 (테두리 분리/없애기 )

티스토리 작성하다 보면 표형식으로 작성이 필요할 때가 많은데 자체 제공하는 표를 쓰면 너무 밑밑해서 변화를 주고 싶을 때가 가끔씩 있습니다. 

그럴 때 필요한 HTML 코드 몇 가지만 아시면 전문가는 아니더라도 나름 본인의 입맛에 맞게 꾸밀 수가 있습니다. 

코드에 대해 워낙 혐기증이 많이 오는 저로서는 아주 기초적인 것도 어렵게 느껴지는 그런 느낌 하시나요?

저와 같은 분들한테 조금이나마 도움이 되셨으면 합니다. 

 

아래 몇 가지 HTML 코드만 아시면 아래 표처럼 만들 수 있습니다 ~^^

• text-align: 값;    표 셀의 정렬 left, center, right
• bgcolor="#색상코드번호"        텍스트 체우기 색상
• border="1"     표의 테두리 두께
• border: solid  5px  #색상코드번호      매개 표에 해당하는 테두리 유형 굵기 색상
• font-size: 30px     폰트사이즈를 설정

• border: none    텍스트 테두리 없애기

• border-collapse: collapse     테두리 상쇄

• border-collapse: separate    테이블 분리

유형	설명
none	기본 값, 테두리 없음
hidden	테두리 숨기기
solid	실선
double	이중선
dashed	파선
dotted	점선
ridge	입체적으로 튀어나온 느낌을 주는 선
groove	입체적으로 들어간 느낌을 주는 선

 

 

예시

 

위에 bgcolor, border 2가지 코드를 사용하여 none 부분 표를 꾸며 보겠습니다. (빨간 네모 안의 내용을 아래와 같이 바꾸면 됩니다.)

 

생상코드는 저는 다른 체우기 색 아래 스포이트로 먼저 색상을 찜아고 아래 그림과 같이 색상코드를 확인합니다. 

 

아래와 같이 표를 한번 만들어 보았습니다. 

 

간단한 내용이지만 저같은 왕초보한테는 어렵답니다.

도음이 되셨기를 바랍니다. 

감사합니다.