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 적용.