[8주][2일][1~2th] HTML/CSS: 게시판 꾸미기

CSS

*,body{
 font-family: "맑은 고딕";
 margin:0px;
 padding:0px;
 font-size:11px;
}
caption{
 background: url(images/title_event.png) no-repeat center center;
 width:700px;
 height:50px;
}
caption span{
 display:none;
}
table{
 border-collapse: collapse;
}
td{
 border-bottom: 1px solid #000;
 text-align:center;
 padding:5px 10px;
}
th{
 height:34px;
 padding:0px 0px;
 font-size:12px;
}
th span{
/*  border-right:1px solid #666; */
 background: url(images/bar7_1.png) no-repeat right 10px;
  display:block;
  padding:0px 0px 2px 0px;
}
tr:FIRST-CHILD{
 
}
tr:last-CHILD{
 border-bottom: 2px solid #000;
}
th:FIRST-CHILD{
 background: url(images/table_header_bg.png) repeat-x;
}
 /* 2열의 th 내용*/
th:nth-child(2) {
 background: url(images/table_header_bg.png) center top repeat-x;
}
th:nth-child(3) {
 background: url(images/table_header_bg.png) center top repeat-x;
}
th:nth-child(4) {
 background: url(images/table_header_bg.png) center top repeat-x;
}
th:nth-child(5) {
 background: url(images/table_header_bg.png) right top repeat-x;
}
.bb{
 border:none;
}
td{
 background: url(images/bar7_1.png) no-repeat right bottom;
}

 

HTML

<table>
<caption><span>이벤트 당첨자</span></caption>
<tr class="aa">
<th><span>번호</span></th>
<th><span>이벤트명</span></th>
<th><span>이벤트기간</span></th>
<th><span>당첨자 발표일</span></th>
<th><span class="bb">당첨자보기</span></th>
</tr>
<tr>
<td>1</td>
<td>그랜드 리뉴얼 오픈일</td>
<td>2012/03/05~2012/03/05</td>
<td>2012/03/05</td>
<td><input type="button" value="확인"></td>
</tr>
<tr>
<td>2</td>
<td>그랜드 리뉴얼 오픈일</td>
<td>2012/03/05~2012/03/05</td>
<td>2012/03/05</td>
<td><input type="button" value="확인"></td>
</tr>
<tr>
<td>3</td>
<td>그랜드 리뉴얼 오픈일</td>
<td>2012/03/05~2012/03/05</td>
<td>2012/03/05</td>
<td><input type="button" value="확인"></td>
</tr>
<tr>
<td>4</td>
<td>그랜드 리뉴얼 오픈일</td>
<td>2012/03/05~2012/03/05</td>
<td>2012/03/05</td>
<td><input type="button" value="확인"></td>
</tr>
<tr>
<td>5</td>
<td>그랜드 리뉴얼 오픈일</td>
<td>2012/03/05~2012/03/05</td>
<td>2012/03/05</td>
<td><input type="button" value="확인"></td>
</tr>
<tr>
<td>6</td>
<td>그랜드 리뉴얼 오픈일</td>
<td>2012/03/05~2012/03/05</td>
<td>2012/03/05</td>
<td><input type="button" value="확인"></td>
</tr>
</table>