[HTML] 테이블 태그에 Single Line 스타일 추가
밋밋한 테이블을 보기좋게!
직접 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
참고 사항 - 3