게시판 리스트를 볼까 with css (3)

전체구조

css만

실제로 사용해보자

이렇게 class="boardList"

주면 css에서 boardList 이걸로 된 것들을 가져온다.

<div id="boardList">

<table width="100%" class="boardList" >

<colgroup>

<col width="5%">

<col width="5%">

<col width="7%">

<col width="*">

<col width="10%">

</colgroup>

<tr>

<th>코드</th>

<th>구분</th>

<th>영역</th>

<th>프로그램명</th>

<th>등록일</th>

</tr>

<tr>

<td>코드1</td>

<td>구분</td>

<td>영역</td>

<td>프로그램명</td>

<td>등록일</td>

</tr>

<tr>

<td>코드2</td>

<td>구분</td>

<td>영역</td>

<td>프로그램명</td>

<td>등록일</td>

</tr>

</table>

</div>

<br /><br /><br />

css에서 table 에 대한 전체 설정을 했지만 해당 테이블은 세로선이 필요하기 때문에 다시 정의해준다.

border-spacing:1px; border-collapse:separate;

<div id="boardLineList">

<table width="100%" style="border-spacing:1px; border-collapse:separate;" class="boardLineList" summary="필드가 많아서 칸구분이 잘안될때 쓰는 표">

<colgroup>

<col width="5%">

<col width="5%">

<col width="7%">

<col width="*">

<col width="10%">

</colgroup>

<tr>

<th>코드</th>

<th>구분</th>

<th>영역</th>

<th>프로그램명</th>

<th>등록일</th>

</tr>

<tr>

<td>코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드코드1</td>

<td>구분</td>

<td>영역</td>

<td>프로그램명</td>

<td>등록일</td>

</tr>

<td>코드2</td>

<td>구분</td>

<td>영역</td>

<td>프로그램명</td>

<td>등록일</td>

</tr>

</table>

</div>

여기까지 끝.