table 태그로 표를 간단하게 (레이아웃 작성용 아닙니다)

<style rel="stylesheet" type="text/css">

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

  table.tableList tr.even { background:#FFFFEA }

  table.tableList tr.over { background:#E3F2FF } /* even 보다 over 가 나중에 정의되기 때문에 두개가 섞이는 경우 over 가 최종 적용됨 */

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; }

</style>

<table class="tableList">

  <col width="45"><col width="58"><col width="50"><col width="321"><col width="60"><col width="90">

  <tr>

    <th>칼럼1</th>

    <th>칼럼2</th>

    <th>칼럼3</th>

    <th>칼럼4</th>

    <th>칼럼5</th>

    <th class="end">칼럼6</th>

  </tr>

  <tr>

    <td>값1</td>

    <td>값2</td>

    <td>값3</td>

    <td class="left dot"><nobr><a>값4</a></nobr></td>

    <td>값5</td>

    <td class="end">값6</td>

  </tr>

  <tr class="end">

    <td>값1</td>

    <td>값2</td>

    <td>값3</td>

    <td class="left dot"><nobr><a>값4</a></nobr></td>

    <td>값5</td>

    <td class="end">값6</td>

  </tr>

</table>

table 태그는 width 가 100% 로 설정되므로 table 태그를 포함하는 쪽에서 width 를 적절하게 설정합니다.

col 태그는 칼럼 갯수만큼 설정합니다. 여기에서는 폭을 설정하는 용도로만 사용.

제목은 th 태그로 설정하고, 본문은 td 태그로 설정합니다.

마우스 커서가 올려졌을때 본문 라인의 배경색을 바꾸는 것은 jQuery 로 구현하세요. (아래 내용 참조)

td 는 기본적으로 중앙 정렬입니다. 좌정렬이 필요한 경우 class 에 left 를 추가합니다.

td 태그의 class 에 dot 를 기술하면 폭을 넘어가는 문자열 대신에 말줄임표(...)가 대치되며,

크롬/사파리/오페라/파이어폭스 등에서는 정상 작동하는데 IE 에서 한줄로 표시되지 않으면

<nobr> 태그로 감싸 줍니다.

테이블의 좌우에는 없지만 전체적으로는 세로선이 사용되었고, 필요하지 않으면 dt 태그의 class 에 end 를 사용합니다.

td 에 가로선이 들어가기 때문에 맨 마지막 줄에는 tr 에 end 클래스를 사용합니다.

코드를 줄이려면, table 에 border-bottom 을 없애고 tr.end 인 td 에만 border-bottom 을 적용해도 되겠지요..

홀짝 라인에 색상 주는 것과, 마우스 하버링 관련 내용은 jQuery 사용

<script>

  $(document).ready(function(){

    $('tr:even').addClass('even'); // th 도 tr 에 묶이지만 tr 의 class 보다 th 속성이 우선 적용되기 때문에, 홀수 라인에 적용된 것처럼 보여요.

    $('tr').hover( // hover 는 jQuery 1.0 부터 7.x 까지 지원. hover 때에도 tr 보다 th 속성이 우선하기 때문에 th 에는 hover 속성 안 먹음.

      function(){ $(this).addClass('over'); }, // mousein, even 속성이 먹여 있어도 style 정의가 even 다음에 over 이므로 over 속성이 최종 적용

      function(){ $(this).removeClass('over'); } // mouseout, over 속성이 없어지므로 이전 속성이 적용

    );

  });

</script>

그런데.. DOCTYPE 이 있으면 다른 브라우저들은 멀쩡한데, IE 8.x 에서 (IE 다른 버전도 마찬가지..?) 호완성 보기 모드가 아닐때..

테이블 맨 윗줄과 맨 아랫줄에 세로선이 간다는. .ㅠ.ㅜ 아무래도 IE 렌더링 버그.

간혹 맨 밑줄에 점선과 실선이 모두 나온다면 관련 처리도 필요할 듯..