Chapter 3. Tables are Evil?

Tabular Data

  • Calendar
  • Spreadsheet
  • Chart
  • Schedule

<table> 사용하기

  • <caption>은 <table> 태그 안에 위치 시킨다.
  • <table>의 summary 속성에 설명을 달 수 있다.
  • 헤더는 <th>로 의미를 부여한다.
  • <th>의 id 속성과 <td>의 headers 속성에 동일한 값을 사용하여 둘의 관계를 표현할 수 있다.
  • abbr 속성을 사용하여 너무 길어서 짤리는 경우에 사용하도록 할 수 있다.
  • <thead>, <tbody>, <tfoot>을 사용하여 테이블 몸체만 따로 스크롤 할 수 있도록 할 수 있다.
  • 브라우저들이 <thead>와 <tfoot>을 먼저 읽도록 <tbody> 위에 놓는다.

CSS

Grid 만들기

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

th, td {

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}
  • th와 td의 오른쪽과 아래에 굵기가 1인 검은색 테두리 설정.

틈새 없애기

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

border-collapse: collapse;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}
  • th, td에 padding을 줘야 Mac용 IE에서도 잘 보인다.
  • padding: 10px 5px 2px 10px -> 위 10px, 오른쪽 5px, 아래 2px, 왼쪽 10px 순으로 padding 적용.