Re-understanding tables and an accessible data table example_CSS/HTML

Unless otherwise specified, the content on this site is licensed under the Creative Commons LicenseAttribution and non-commercial use, please respect the fruits of your labor.

Tables have always been an important part of the web design and production process. Before learning CSS layout, most of them were used for layout. However, until now, I found that I have not really understood and fully mastered tables. I have to use them. Re-understand the form...

In modern web design and production, the main purpose of tables should be to store multidimensional two-dimensional data. Tags related to tables include table, tr, td, th, tbody, thead, tfoot, col, colgroup, and caption. How to apply these tags reasonably? Let’s start with an explanation of the nouns.

Explanation of terms

table

Display 2D data

tr

A row in a table

td

Data cell

th

Header cell, which defines the header information of a row or column, cannot be used in layout tables.

tbody

A row or multiple rows in the table are grouped together and must be used together with thead and tfoot

thead

Group a row or multiple rows in the table and use it together with tbody and tfoot

tfoot

Group a row or multiple rows in the table and use it together with tbody and thead

col

column, apply specific attributes to a certain column or several columns, use it together with colgroup

colgroup

Combination of columns, used together with col

caption

Define the title of the table, used at the beginning of the table, only once

summary

Explain the purpose of the form

Example:

<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>