wulin.com html 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하십시오.
위 : 마크 업 언어 - 제목
원래 소스
표준화 된 디자인 솔루션 -마크 업
및 스타일 핸드북 1 부 : 마크 업으로 마크 업으로 시작하십시오 2 장 사악한 테이블?알아? 테이블을 사용하여 언제 시작되었는지 모르겠습니다. 실제로 웹 표준을 기반으로 웹 페이지를 작성하는 가장 큰 신화는 더 이상 테이블 사용을 중단하는 것입니다. 전염병처럼 들리며, 피해야하며, 밀봉되어 먼지가 많은 캐비닛에 던져야하며, 인터넷 개발 시대의 초기부터 골동품으로 간주됩니다.
그러한 혐오는 어디에서 왔습니까? 아마도 그것은 적어도 적어도 좋은 이유가 있기 때문에 처음에는 매우 간단했을 것입니다. 많은 사람들이 테이블 중첩과 빈 GIF 사진의 전통적인 레이아웃을 포기하고 유연한 구조화 된 CSS 레이아웃을 사용하는 이점을 홍보하는 데 자신감을 가질 것입니다. 우리는 분리 된 방식으로 모든 테이블을 제거하기 시작할 수 있으며, 심지어 모든 테이블을 추방 할 것을 고집스럽게 주장 할 수도 있습니다.
이 책의 뒷부분에서 우리는 CSS 레이아웃 방법과 그렇게하는 모든 이점을 볼 수 있습니다. 그러나 이제 올바른 상황에서 테이블을 사용하는 방법, 즉 데이터 목록을 표시 할 때 테이블을 사용하는 방법을 살펴 보겠습니다. 우리는 데이터 목록을보다 쉽게 사용하고 더 아름답게 만드는 몇 가지 간단한 방법을 살펴볼 것입니다.
그것은 완전히 형태입니다목록 데이터를 태그 할 때는 테이블 태그를 사용하지 않을 이유가 전혀 없습니다. 그러나 잠깐, 목록 데이터는 무엇입니까? 몇 가지 예는 다음과 같습니다. 캘린더 스프레드 시트 차트 시간 일정
이러한 예와 다른 많은 경우에, 매우 복잡하고 엄격한 CSS 효과를 사용하여 데이터를 테이블처럼 보이게해야합니다. CSS를 제거한 후 CSS를 제거한 후 정확하게 읽는 것은 아마도 각 데이터를 읽을 수 없을 것입니다. 사실, 우리는 테이블을 두려워 할 필요가 없습니다. 원래 디자인 목표와 함께 사용해야합니다.
모든 사람을위한 형태테이블이 비판을받는 이유 중 하나는 신중하게 사용되지 않으면 유용성 결함이 있기 때문입니다. 예를 들어, 화면 읽기 프로그램은 콘텐츠를 올바르게 읽기가 어렵지만 작은 화면 장치는 종종 레이아웃에 사용되는 테이블에 의해 방해되지만 목록 데이터 테이블의 유용성을 높이는 간단한 방법이 있습니다. 동시에, 우리는 향후 CSS와 스타일 설정을 용이하게하기 위해 유연한 구조를 설정합니다.
미국 야구 리그의 리그 기록 인 그림 3-1의 간단한 예를 살펴 보겠습니다.
그림 3-1 : 일반적인 데이터 표현 예
아마도 이것은 Red Sox 팬들에게 매우 우울한 통계 데이터이지만 그림 3-1은 목록 데이터의 완벽한 예입니다. 3 개의 테이블 헤더 (연도, 상대, 시즌 레코드 (WL))가 있고 4 년간의 데이터가 있습니다. 테이블에는 테이블의 제목이 있으며 테이블의 내용을 설명합니다.
이 데이터 테이블을 표시하는 방법은 매우 직관적이며 다음과 같은 코드로이를 수행 할 수 있습니다.
<p align = center> 보스턴 레드 삭스 월드 시리즈 챔피언십 </p>
<테이블>
<tr>
<td align = center> <b> 년 </b> </td>
<td align = center> <b> 상대 </b> </td>
<td align = center> <b> 시즌 레코드 (wl) </b> </td>
</tr>
<tr>
<td> 1918 </td>
<td> 시카고 컵스 </td>
<td> 75-51 </td>
</tr>
<tr>
<td> 1916 </td>
<td> 브루클린 로빈스 </td>
<td> 91-63 </td>
</tr>
<tr>
<td> 1915 </td>
<td> 필라델피아 필리스 </td>
<td> 101-50 </td>
</tr>
<tr>
<td> 1912 </td>
<td> 뉴욕 자이언츠 </td>
<td> 105-47 </td>
</tr>
</테이블>
이러한 방식으로 표시된 결과는 그림 3-1과 매우 유사해야하지만이 기준에 약간의 개선 사항을 추가 할 수 있습니다.
먼저, 더 시맨틱 <caption> 태그를 사용하여 Boston Red Sox World Series Championships를 저장할 수 있습니다. <테이블> 시작 태그 직후 <caption> 태그는 일반적으로 테이블의 제목 또는 테이블 정보에 대한 설명을 저장하는 데 사용됩니다.
사용자가 테이블 주제를 쉽게 볼 수 있고 웹 내용을 다른 방식으로 아는 사람들을 도울 수 있습니다.
시작 단락을 제거하고 올바른 <caption>을 추가합시다.
<테이블>
<캡션> 보스턴 레드 삭스 월드 시리즈 챔피언십 </caption>
<tr>
<td align = center> <b> 년 </b> </td>
<td align = center> <b> 상대 </b> </td>
<td align = center> <b> 시즌 레코드 (wl) </b> </td>
</tr>
<tr>
<td> 1918 </td>
<td> 시카고 컵스 </td>
<td> 75-51 </td>
</tr>
<tr>
<td> 1916 </td>
<td> 브루클린 로빈스 </td>
<td> 91-63 </td>
</tr>
<tr>
<td> 1915 </td>
<td> 필라델피아 필리스 </td>
<td> 101-50 </td>
</tr>
<tr>
<td> 1912 </td>
<td> 뉴욕 자이언츠 </td>
<td> 105-47 </td>
</tr>
</테이블>
중요하게도, 제목은 다음 정보의 주제를 빠르게 전달해야합니다. 기본 설정에 따르면 대부분의 비주얼 브라우저는 테이블 상단의 <caption> 태그의 텍스트를 중심으로합니다. 물론 CSS를 사용하여 기본 설정의 스타일을 나중에 변경할 수 있습니다.이 문제는이 장의 팁 확장에서 논의됩니다. 실제로, 제목은 이제 고유 한 태그로 위치하여 후속 수정 작업을보다 쉽고 간단하게 만듭니다.
이전 페이지 1 2 3 4 5 6 7 8 다음 페이지 전체 텍스트 읽기