본문 바로가기
Local Oriented/HTML CSS JS

CSS 와 jQuery, table 태그 등을 사용하여 목록 만들기

래빗 크리스 2012. 7. 21. 10:21





레이아웃이 아니라, 그리드 형태로 목록을 만들어야 하는 경우 table 태그를 사용하면 편합니다.

아래 소개하는 목록은.. 목록의 맨 왼쪽과 맨 오른쪽 세로선이 없어요.

가독성을 위해 짝수행에 배경색을 주고, 마우스 커서가 올려진 행에 배경색이 다르게 했어요.

각 셀은 중앙정렬을 기본으로 하고 (아직 까지 모든 웹브라우저는 td 의 vertical-align 이 middle), 좌정렬과 우정렬은 클래스를 활용.

셀에 입력된 글자가 많아질때 말줄임 표시를 할 수 있도록 세팅



.css 파일

@charset "UTF-8" /* 혹시 문자셋 관계로 External CSS 를 사용하지 못한다면 사용 */

table.tableList { table-layout:fixed; border-top:2px #EA0000 solid; border-bottom:1px #CFCFCF solid; }

table.tableList tr.even { background:#FFFFEA } /* CSS2 나 CSS3 에 even 은 없다 */

table.tableList tr:hover { background:#E3F2FF } /* 마우스 커서가 올려진 경우라서 모바일에선 무용. :focus 가 아님에 유의 */

table.tableList th, table.tableList td { padding:7px 3px 3px 3px; text-align:center; font-size:9pt; }

table.tableList th { border-right:1px #F3D7D7 solid; border-bottom:1px #CFCFCF solid; color:#E04C4C; background:#FCEFEF; }

table.tableList th.end, table.tableList td.end { border-right:none }

table.tableList td { border-right:1px #F0F0F0 solid; border-bottom:1px #CFCFCF dotted; vertical-align:center; }

table.tableList td.dot { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } /* 말줄임 */

table.tableList td.left { text-align:left; }

table.tableList td.right { text-align:right; }

table.tableList td img { vertical-align:middle; }



.html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
...
</head>
<body>
...
<table class="tableList" style="width:100%">
  <col width="33%"><col width="33%"><col width="33%">
  <tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
  </tr>
  <tr>
    <td>td1</td>
    <td>td2 내용이 길어지면 말줄임표가 작동</td>
    <td>td3</td>
  </tr>
  <tr>
    <td>td1</td>
    <td>td2 내용이 길어지면 말줄임표가 작동</td>
    <td>td3</td>
  </tr>
  <tr>
    <td>td1</td>
    <td>td2 내용이 길어지면 말줄임표가 작동</td>
    <td>td3</td>
  </tr>
</table>

<script type="text/javascript" src=".../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  $(window).load(function(){
  });
  $(document).ready(function(){
    redrawTableList();
  });

  function redrawTableList(){ /* 점진적 개선이 되는 방향으로 세팅. 자바스크립트 사용 못하는 기기가 존재하네요..  */
    $('table.tableList tr td:last-child, table.tableList tr th:last-child').addClass('end'); /* 맨 오른쪽 세로선 없앰. :last 는 전체 td 대상 */
    $('table.tableList tr:even').addClass('even'); /* CSS 가 짝수행을 쿼리하지 않아서 jQuery 로 해결 */
    $('table.tableList tr td:nth-child(2)').addClass('left dot'); /* nth-child(n) n 은 1부터 시작. :eq(n) 은 전체 td 에서 선정하는 것임에 유의 */
  }
</script>
</body>
</html>


col 태그와 table-layout:fixed 를 이용하여 폭을 정확히 기술하려고 table 에 width 설정하였는데,
웹브라우저의 렌더링 엔진이 폭을 자동 계산하는 시간이 아깝다면 이렇게 세밀히 조정하는 것도 괜찮아요.
보여지는 내용에 대해 정확히 알면 간단한데, 내용이 가변한다면 이런 노력은 무용.

하나의 화면에 table 리스트가 여러개라면 각 table 에 id 를 부여하여 사용하면 되겠네요.

저작자표시 비영리 동일조건

'Local Oriented > HTML CSS JS' 카테고리의 다른 글

세로로 반복되는 배경 이미지 위에 내용물을 입힐 때 의도하지 않은 빈 줄 없애는 방법  (0) 2012.10.15
font-family  (0) 2012.08.13
console.log 와 alert 차이..?  (0) 2012.07.20
태그 닫을때 유의할 점  (0) 2012.07.18
웹브라우저 주소표시줄(창) 없애는 HTML/jQuery 코드  (0) 2012.07.14

'Local Oriented/HTML CSS JS' Related Articles

티스토리툴바