HTML/CSS

HTML5

[CSS3] Table 스트라이프

WEBSP2012.02.01 13:06

조회 : 4,312

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>

2개의 댓글이 있습니다.

  • 옴바2012.02.13

    <thead>/<tbody> 안써도되요?
  • WEBSP2012.02.13

    이렇게도 사용 할 수 있다라는 것만 보여주는 것이지~
    구체적인 퍼블리싱은 작업할때~ 적용!

select count(*) as cnt from g4_login where lo_ip = '54.211.101.93'

1194 : Table 'g4_login' is marked as crashed and should be repaired

error file : /bbs/board.php