속을 까볼까

이것을 훨씬 단순하게 만들 수 있다.  이 작은 테이블에 사용된 마크업(HTML)이 얼마나 될까? 13.7k이다. 여기에 17개 행과 9개 열이 있다. 그런데 내가 간격용 GIF는 이야기했나?
여기에 너무 많은 테이블 셀과 간격용 GIF가 사용되고 있다. 그리고 점선 외곽선 모두는 테이블 상의  background 속성을 사용하고 있는 데, 이것은 유효한 것이 아니다.
• 테이블의 테이블을 왜 사용하는 데 ?
• 블릿 목록을 만들려고~, 농담 아니야?
이것은 8개의 테이블셀과 4개의 CSS 규칙으로 만들 수 있다. 자세히 살펴보면, 8개 셀과 4 css 규칙이 전부다.
• 그러나 이것은 블릿 리스트로 표현한 또 다른 테이블 편법이다.
• 그냥 블릿 리스트(ul/li) 마크업(HTML)으로 블릿 목록을 만들고 나머지는 CSS로 처리하면 되는 것이다.
<table>에는 <ul>로, <td>는 <li> 규칙을 사용하면 된다. 그렇다. 이런 식으로 하는 게 올바른 것이다.
• 그럴듯한 블릿 목록을 만들기 위해 8개 이상의 테이블 셀을 사용하는 것은 결국 접근성을 떨어뜨리게 된다.
• 훌륭! 위장된 블릿 그만.

테이블 구조를 보여주는 코드는 다음과 같다:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }