게시판 만들면서 웹표준 ul 테이블 > 자유게시판

자유게시판

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

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

div 를 css 를 통해 테이블처럼 사용해도 좋죠
© SIRSOFT
현재 페이지 제일 처음으로