게시판 만들면서 웹표준 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년 전 조회 1,988
9년 전 조회 1,879
9년 전 조회 2,201
9년 전 조회 1,783
9년 전 조회 2,131
9년 전 조회 1,514
9년 전 조회 1,156
9년 전 조회 1,133
9년 전 조회 1,704
9년 전 조회 1,847
9년 전 조회 1,785
9년 전 조회 1,811
9년 전 조회 1,703
9년 전 조회 1,128
9년 전 조회 2,002
9년 전 조회 981
9년 전 조회 1,790
9년 전 조회 1,189
9년 전 조회 1,226
9년 전 조회 1,103
9년 전 조회 1,313
9년 전 조회 1,605
9년 전 조회 1,826
9년 전 조회 1,379
9년 전 조회 1,654
9년 전 조회 1,127
9년 전 조회 1,716
9년 전 조회 1,132
9년 전 조회 2,730
9년 전 조회 1,403
🐛 버그신고