[CSS3] Table 스트라이프
WEBSP2012.02.01 13:06
조회 : 5,443
Table 스트라이프
스트라이프는 자주 봐온 디자인 입니다.
글을 읽을때 놓치지 않고 한줄씩 편안하게 볼 수 있도록 얼룩말 무늬 처럼 표현하는 것을 말합니다.
Table 태그에 ID나 CLASS를 사용하지 않고, CSS만을 통해 생성할 것입니다.
가상 클래스를 통해 지저분한 CLASS 요소를 사용하지 않고
표현해 낼 수 있습니다.
nth-of-type 선택자는 특정 타입의 n번째 요소를 전부 찾아줍니다.
nth-of-type(even) , nth-of-type(odd) 이렇게 설정이 되어있다면 짝수행 과 홀수행에
각기 다른 표현을 할 수 있습니다.
- CSS 소스
<style type="text/css">
table { width: 100%; border-collapse: collapse; }
tr th, tr td { padding: 3px 0; text-align:center; border: 1px solid #BBB; }
tr th { color: #FFF; background: #9C0; }
tr:nth-of-type(even) { background: #EEE; }
tr:nth-of-type(odd) { background: #DDD; }
</style>
- HTML 소스
<table>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
옴바2012.02.13