[CSS] <ul> <li>로 테이블 만들기

<ul>과 <li>로 테이블을 대체할수 있다.

하지만 요즘 다시 웹표준으로 <table>을 많이 사용하기 때문에 간단하게 어떻게 사용하는지
알아보고 가도록 한다.

<ul>과 <li>는 style 속성이 제일 중요하다.

div { width: 300px; border: 1px solid #000000; border-top: none; border-right: none; } 
div ul { clear: left; margin: 0; padding: 0; list-style-type: none; position: relative; border-top: 1px solid red; display: inline-block; } 
div ul li { box-sizing: border-box; width: 100px; float: left; text-align: center; margin: 0; padding: 2px 1px; position: relative; border-right: 1px solid red; }

div는 table 을 나타내고, ul은 tr로, li는 td를 나타낸다.

div의 사이즈를 정해주고 ul의 list-style-type을 none을 줘야지 ul의 특성인 ●로 뜨는 리스트를 방지할수 있다.
그리고 display: inline-block을 줌으로써 ul이 이어지게 설정을 했다.

li는 margin과 padding에 의해서 표가 깨지는걸 방지하기 위해 width에 포함시키려고 box-sizing을 사용,
float를 left를 줌으로써 list 특유의 아래로 들어가는 설정을 방지했다.

예제를 보도록 하겠다.

http://hyoseung930.cafe24.com/bolg_poster/ul_li_table_test_page.php