devnauts

밋밋한 테이블을 보기좋게!

직접 Table 태그를 사용하여 테이블을 구성하거나, Pandoc 툴 등을 사용하여 HTML을 생성하였을 경우, 만들어진 테이블은 스타일이 없기 때문에 너무 밋밋해보입니다. 그렇다고 단순하게 border="1" 이렇게 스타일을 줘버리면 HTML 기본의 보기에 아름답지 않은 경계선이 붙게 됩니다. 다음은 보기 좋은 Single Line 경계선을 추가하는 몇가지 스타일 샘플입니다.

<샘플1>

TABLE 태그 –> style="border-collapse:collapse;" border="1"

TH, TD 태그 –> style="padding:5px 5px"

Item	Amount	Cost
Orange	10	7.00
Bread	4	3.00
Butter	1	5.00
Total		15.00

<샘플2 - 티스토리 스타일>

TABLE 태그 –> style="border-collapse:collapse;border:1px solid #ccc;"

TH, TD 태그 –> style="border:1px solid #ccc;padding:5px 5px"

Item	Amount	Cost
Orange	10	7.00
Bread	4	3.00
Butter	1	5.00
Total		15.00

<샘플3 - 미디어위키 스타일>

TABLE 태그 –> style="background-color: #f8f9fa;color: #222;border-collapse:collapse;border: 1px solid #a2a9b1;"

TH, TD 태그 –> style="border: 1px solid #a2a9b1;padding:5px 5px"

Item	Amount	Cost
Orange	10	7.00
Bread	4	3.00
Butter	1	5.00
Total		15.00

참고 사항

티스토리 구 편집기로 테이블을 추가할 경우 테이블 스타일이 아래와 같이 오류가 있어 폰트 설정이 적용되지 않습니다.

<table class="txc-table" style="border:none;border-collapse:collapse;;font-family:" 맑은="" 고딕",="" sans-serif;font-size:13px"="" width="664" cellspacing="0" cellpadding="0" border="0">

제대로 될려면 아래와 같이 수정이 필요합니다.

<table class="txc-table" style="border:none;border-collapse:collapse;;font-family:맑은 고딕, sans-serif;font-size:13px" width="664" cellspacing="0" cellpadding="0" border="0">

참고 사항 - 2

티스토리 콘텐트 설정 중, ‘단락 앞뒤에 공백’ 옵션을 사용으로 하였을 경우, 테이블내 컨텐츠에도 공백이 적용되어 아래와 같이 행높이가 확장되어 보이게 됩니다. 필요에 따라 해당 옵션을 해제하거나, 테이블에 추가적인 행높이 스타일을(;height:xx) 사용하기 바랍니다.

참고 사항 - 3

• [보너스] Emacs용 스타일 자동 추가 스크립트