테이블의 재이해와 접근 가능한 데이터 테이블 example_CSS/HTML

별도로 명시하지 않는 한, 이 사이트의 콘텐츠는 크리에이티브 커먼즈 라이선스저작자 표시 및 비상업적 사용에 따라 라이선스가 부여됩니다. 귀하의 노력의 결실을 존중해 주시기 바랍니다.

테이블은 항상 웹 디자인과 제작 과정에서 중요한 부분이었습니다. CSS 레이아웃을 배우기 전에는 대부분 레이아웃에 사용되었습니다. 그러나 지금까지는 테이블을 제대로 이해하지도, 완벽하게 마스터하지도 못했습니다. 양식을 다시 이해해야 합니다...

현대 웹 디자인 및 제작에서 테이블의 주요 목적은 다차원 2차원 데이터를 저장하는 것이어야 합니다. 테이블과 관련된 태그에는 table, tr, td, th, tbody, thead, tfoot, col, colgroup, caption 등이 있습니다. 이러한 태그를 합리적으로 적용하는 방법은 무엇입니까? 명사에 대한 설명부터 시작하겠습니다.

용어설명

테이블

2D 데이터 표시

tr

테이블의 행

td

데이터 셀

번째

행이나 열의 헤더 정보를 정의하는 헤더 셀은 레이아웃 테이블에서 사용할 수 없습니다.

몸

테이블의 한 행 또는 여러 행은 함께 그룹화되며 thead 및 tfoot과 함께 사용해야 합니다

머리

테이블에서 한 행 또는 여러 행을 그룹화하고 tbody 및 tfoot과 함께 사용하세요

티풋

테이블에서 한 행 또는 여러 행을 그룹화하여 tbody 및 thead와 함께 사용하세요

열

컬럼, 특정 컬럼 또는 여러 컬럼에 특정 속성을 적용하고, colgroup과 함께 사용

콜그룹

컬럼과 함께 사용되는 컬럼의 조합

캡션

표 시작 부분에 사용되는 표 제목을 한 번만 정의하세요.

요약

양식의 목적을 설명하세요

예:

<table summary="这是一个具有亲和力的表格的演示" id="demotab">
<caption>
访问 <a href="http://www.forest53.com">www.forest53.com</a> 浏览器统计
</caption>
<thead>
<tr>
<th>浏览器 / 月 </th>
<th>2005 / 11 </th>
<th>2006 / 04 </th>
<th>2006 / 05 </th>
</tr>
</thead>
<tfoot>
<tr>
<th>总计</th>
<td>1,646 ( 98.45% )</td>
<td>6,978 ( 99.48% ) </td>
<td>5,366 ( 99.56% ) </td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Internet Explorer</th>
<td>1,535 (91.81%)</td>
<td>5,905 (86.41%)</td>
<td>4,550 (84.42%)</td>
</tr>
<tr>
<th>Firefox</th>
<td>98 (5.86%)</td>
<td>746 (10.92%)</td>
<td>640 (11.87%)</td>
</tr>
<tr>
<th>Opera</th>
<td>13 (0.78%)</td>
<td>147 (2.15%)</td>
<td>176 (3.27%)</td>
</tr>
</tbody>
</table>