Whiteship's Note

Chapter 3. Tables are Evil?

View/HTML/CSS : 2008.03.18 19:41


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

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top

Write a comment.




: 1 : ··· : 12 : 13 : 14 : 15 : 16 : 17 : 18 :