스타일 속성 - 테이블
테이블 태그 사용 예제
<table>
<caption>주소록</caption>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>20세</td>
</tr>
</tbody>
</table>
위에 있는 테이블 태그 사용 예제를 기준으로 설명하겠습니다.
■ 테이블 테두리에 스타일 지정하기
table, th, td { border:1px solid black; }
위와 같이 스타일만 지정하면 테두리가 겹치는 곳은 두배로 두껍게 됩니다. 이 때 table 엘레멘트에 border-collapse:collapse 값을 지정해주면 겹치는 곳의 테두리가 하나로 나타납니다.
table { border-collapse:collapse; }
table, th, td { border:1px solid black; }
■ 테이블 안에 텍스트 수평 졍렬 방법
td { text-align:center; }
■ 테이블 안의 텍스트 수직 정렬 방법
td { vertical-align: center; }
■ 테이블 셀에 여백 주기
td { padding:10px; }
■ 테이블에 배경색 주기
th { backgroudn-color:green; }
[참고] http://www.w3schools.com/css/css_table.asp