게시판 만들면서 웹표준 ul 테이블 정보
게시판 만들면서 웹표준 ul 테이블
본문
만들어봤습니다.
테이블이 아닌 테이블 필요하신 분 쓰세염 ^^
다 만든것이 아니여서 좀 튜닝하셔야 할듯합니다.
.wrap_boadTable {border-top:2px solid #333}
.wrap_boadTable ul {}
.wrap_boadTable ul li {float:left}
.wrap_boadTable .header {border:1px solid #ddd}
.wrap_boadTable .header li {height:42px; line-height:42px; font-size:1.22em; text-align:center; font-weight:bold}
.wrap_boadTable ul:after { content: "."; display: block; height: 0; clear:both; visibility: hidden}
.wrap_boadTable ul .column1 {width:10%; border-right:1px solid #ddd; text-align:center;}
.wrap_boadTable ul .column2 {width:50%; margin-left:-1px; border-right:1px solid #ddd}
.wrap_boadTable ul .column3 {width:15%; margin-left:-1px; border-right:1px solid #ddd; text-align:center;}
.wrap_boadTable ul .column4 {width:15%; margin-left:-1px; border-right:1px solid #ddd; text-align:center;}
.wrap_boadTable ul .column5 {width:10%; margin-left:-1px;text-align:center;}
.wrap_boadTable .list ul {border:1px solid #ddd; margin-top:-11px;}
.wrap_boadTable .list ul:hover {background:#f5f5f5}
.wrap_boadTable .list ul li {}
.wrap_boadTable .list ul li a {}
<div class="wrap_boadTable">
<ul class="header">
<li class="column1">번호</li>
<li class="column2">제목</li>
<li class="column3">글쓴이</li>
<li class="column4">날짜</li>
<li class="column5">조회</li>
</ul>
<div class="list">
<ul>
<li class="column1" id="boNum"><a href="">5690</a></li>
<li class="column2" id="boTitle"><a href="">fdsfds</a></li>
<li class="column3" id="boName"><a href="">fdsfds</a></li>
<li class="column4" id="boDate"><a href="">fdsfds</a></li>
<li class="column5" id="boHit"><a href="">fdsfds</a></li>
</ul>
<ul>
<li class="column1"><a href="">5690</a></li>
<li class="column2"><a href="">fdsfds</a></li>
<li class="column3"><a href="">fdsfds</a></li>
<li class="column4"><a href="">fdsfds</a></li>
<li class="column5"><a href="">fdsfds</a></li>
</ul>
</div>
</div>
1
댓글 2개

div 를 css 를 통해 테이블처럼 사용해도 좋죠

그러나, UI로 하는것이 현명할듯합니다.
좋은 정보 감사합니다.