일반전인 게시판 형태의 테이블을 만들어보자!

1. 게시판 모양을 마크업한다.

<table class="board_list">
<thead>
<tr>
<th class="first" >no</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>맛스타 복숭아 맛 </td>
<td>행보관</td>
<td>99</td>
</tr>
</tbody>
</table>

2. 여기에 아래와 같은 css를 입힌다.

.board_list {width:60%; background:url(images/head_01.gif) no-repeat right top; border-bottom:1px solid silver;}
.board_list th {background:url(images/line.gif) no-repeat left top; white-space:pre;}
.board_list th.first {background:url(images/head_01.gif) no-repeat left top;}

1. 테이블의 양 끝이 디자인 처리된 경우를 예로 들어 제작함. (배경이미지의 포지션을 좌,우로 바꿔서 유동적인 사이즈에 대응할수 있음)
2. thead의 디자인을 통으로 만든후 board_list와 th.first에 각각 right와 left로 적용함. (예제의 이미지 사이즈 : 1200 * 29)
3. 각 th에는 구분선을 배경으로 넣을수 있으며, white-space 속성을 이용해 단어가 줄바꿈되는 일이 없도록 한다.

이제 th의 높이값, 컬러, td등을 원하는대로 스타일한다.

.board_list th {height:18px; padding:7px 5px 4px;} (이미지 높이 = padding + height - font-size)
.board_list th {color:#fff;}
.board_list td {color:#444; padding:5px 5px 2px; text-align:center; border-bottom:1px solid #eee;}

1. 돋움체의 경우 아래로 3픽셀 여백을 가지므로, padding값 7px 5px 4px;은 좌우로 5픽셀, 상 7픽셀, 하 4픽셀을 지정하며 세로 중앙을 맞춰준다.
2. 그림에서처럼 폰트별, 브라우저별 간격값을 참고한다.

3. 최종 완성형