표의 특징
표에 대한 HTML의 기본 디자인은 표 전체의 테두리와 셀(cell) 사이에 여백이 기본적으로 지정되어 있다. 이 여백을 무시하려면 <table> 태그에 border-collapse 효과의 값으로 collapse를 주면 된다.
예제
example1.html - (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > < style > table{ border:1px solid gray; border-collapse: collapse; } th{ background-color: #d0d0d0; font-weight:bold; } th,td{ border:1px solid gray; padding:5px; } </ style > </ head > < body > < table > < tr > < th >순서</ th > < th >과목명</ th > < th >토픽수</ th > </ tr > < tr > < td >1</ td > < td >웹서비스 만들기</ td > < td >12</ td > </ tr > < tr > < td >2</ td > < td >HTML 수업</ td > < td >13</ td > </ tr > < tr > < td >3</ td > < td >HTML 수업</ td > < td >9</ td > </ tr > < tr > < td >4</ td > < td >CSS 수업</ td > < td >15</ td > </ tr > </ table > </ body > </ html > |