게시판 만들면서 웹표준 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>

|

댓글 2개

http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css

div 를 css 를 통해 테이블처럼 사용해도 좋죠
DIV 테이블은 저도 예전에 사용했었습니다.
그러나, UI로 하는것이 현명할듯합니다.
좋은 정보 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

+
제목 글쓴이 날짜 조회
9년 전 조회 2,029
9년 전 조회 1,919
9년 전 조회 2,243
9년 전 조회 1,818
9년 전 조회 2,167
9년 전 조회 1,560
9년 전 조회 1,200
9년 전 조회 1,174
9년 전 조회 1,763
9년 전 조회 1,891
9년 전 조회 1,827
9년 전 조회 1,859
9년 전 조회 1,763
9년 전 조회 1,170
9년 전 조회 2,042
9년 전 조회 1,022
9년 전 조회 1,829
9년 전 조회 1,230
9년 전 조회 1,279
9년 전 조회 1,144
9년 전 조회 1,361
9년 전 조회 1,653
9년 전 조회 1,866
9년 전 조회 1,428
9년 전 조회 1,702
9년 전 조회 1,171
9년 전 조회 1,761
9년 전 조회 1,172
9년 전 조회 2,792
9년 전 조회 1,448