[table3.html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="table3.css" />
</head>
<body>
<table class="boardList">
<tr>
<th class="number">번호</th>
<th class="title">제목</th>
<th class="writer">작성자</th>
<th class="date">작성일</th>
<th class="viewCnt">조회수</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>
<tr>
<td>3</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
</table>
</body>
</html>
[table3.css]
.boardList
{
width:100%;
border-top: 1px solid #666;
border-left: 1px solid #666;
text-align:center;
border-collapse:collapse;
}
.boardList th, td
{
padding:10px;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
.boardList th.number {width: 53px;}
.boardList th.title {width: *;}
.boardList th.writer {width: 70px;}
.boardList th.date {width: 90px;}
.boardList th.viewCnt {width: 60px;}
[설명]
아래는 가느다란 실선 테이블을 만들기에서의 핵심이다.
1. 테이블의 맨 윗쪽선과 왼쪽선을 만드는 부분
.boardList
{
border-top: 1px solid #666;
border-left: 1px solid #666;
}
2. th, td의 오른쪽과 아래쪽 선을 만드는 부분
.boardList th, td
{
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
3. 1, 2번만 하면 선 사이의 간격(th, td)이 벌어져 있어서
간격을 붙여줘야 한다.
border-collapse:collapse;
