일반전인 페이징 형태의 테이블을 만들어보자!

1. 페이징을 마크업한다.

<ul id="pagenum">
<li><a href="#"><img src="images/page_first.gif" alt="처음으로" /></a></li>
<li><a href="#"><img src="images/page_next.gif" alt="다음으로" /></a></li>
<li><span class="first"><a href="#">1</a></span></li>
<li><span><a href="#">2</a></span></li>
<li><span><a href="#">3</a></span></li>
<li><span><a href="#">4</a></span></li>
<li><span><a href="#">5</a></span></li>
<li><span><a href="#" class="active">6</a></span></li>
<li><span><a href="#">7</a></span></li>
<li><span><a href="#">8</a></span></li>
<li><span><a href="#">9</a></span></li>
<li><span><a href="#">10</a></span></li>
<li><a href="#"><img src="images/page_prev.gif" alt="이전으로" /></a></li>
<li><a href="#"><img src="images/page_last.gif" alt="마지막으로" /></a></li>
</ul>

• 
• 
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 
• 

2. 아래의 스타일을 적용한다.

1. 페이징은 기본적으로 가운데 정렬시킨다.
2. 페이징은 구분선을 넣을수 있는 형태로 만든다.
3. 클릭할 수 있는 영역을 넓게하여 사용성을 높인다.
4. 마우스 오버시 배경색을 바꿀수 있도록 한다.

3. 완성형

• 
• 
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 
• 

4. 의견
a. 이미지와 텍스트가 인라인 요소로 배열되어 있는 형태이므로, 가운데 정렬(text-align)이 용이하다.
b. 링크의 영역을 넓히기엔 가로방향으로 한정되어 있는것이 단점.