4-2. 테이블 꾸미기
■ CSS로 테이블 꾸미기
<table> 태그를 이용하여 웹 페이지에서 테이블을 만들고 열 또는 행을 병합하는 방법에
대해 알아보았습니다. 이번 절에서는 CSS를 이용하면 웹 페이지의 테이블을 꾸미는 것에 대해 알아봅니다.
<style>
table { border-collapse: collapse; }
table, th, td { border: solid 1px #cccccc; }
table { border-top: solid 3px skyblue; }
th { padding: 10px; background-color: #eeeeee; }
td { padding: 10px; text-align: center; }
#col1, #col2, #col3 { width: 100px; }
#col4 { width: 250px; }
.bold { font-weight: bold; }
</style>
<body>
<h3>서울/대전간 열차 요금표</h3>
<table>
<tr><th id="col1">종류</th><th id="col2">일반실</th><th id="col3">특실</th><th id="col4">비고</th></tr>
<tr><td class="bold">무궁화호</td><td>11,000원</td><td>-</td><td rowspan="3">연령, 동반 가족 등은 특가 할인</td></tr>
<tr><td class="bold">새마을호</td><td>18,000원</td><td>25,000원</td></tr>
<tr><td class="bold">KTX</td><td>24,000원</td><td>30,000원</td></tr>
</table>
</body>
ex4-3.html의 실행 결과
테이블을 꾸미는 데 사용된 CSS의 속성과 속성 값을 표로 정리하면 다음과 같습니다.
