|
[HTML] ul li 태그로 테이블처럼 사용하기 |
<table> 태그는 웹표준에서 디자인적 관점이 아닌
순수 테이블로 이해하기 때문에
사용을 권장 하지 않는다고 하네요
처음부터 <table> 태그로 만들어 온 나한테 이런 싱숭생숭한 신세계의 태그들
이리 저리 검색 해가며 테이블을 만들고 포스팅 합니다^^
표 라인을 어떻게 처리 할까 고민하다가 border을 요리조리 수정해 보았어요
더 심플한 방법이 있다면 댓글 달아 주세요^^
<html>
<head>
<style>
.li_table {width: 300px; border:1 solid red;border-top:none;border-right:none}
.li_table ul {clear: left;margin: 0;padding: 0;list-style-type: none;border-top:1 solid red;}
/* list-style-type 블릿표시 padding: 0; 들여쓰기*/
.li_table .subject {font-weight: bold;text-align: center;}
.li_table ul li {text-align: center;float: left;margin: 0;padding: 2px, 1px;border-right:1 solid red;width: 100px;}
.li_table ul .col {width: 99px;} /* 표 라인 맞추기기 위해*/
</style>
</head>
<body>
<div class="li_table">
<ul class="subject">
<li class="col">제목 A</li>
<li>제목 B</li>
<li>제목 C</li>
</ul>
<ul>
<li class="col">a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li class="col">1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li class="col">가 </li>
<li>나 </li>
<li>다 </li>
</ul>
</div>
</body>
</html>
결과 화면
'프로그램 > HTML' 카테고리의 다른 글
| [HTML]<!DOCTYPE HTML> 이미지 하단 여백문제 해결 (0) | 2014.01.26 |
|---|---|
| [HTML] div 가운데 정렬 (2) | 2013.08.29 |
