Tabellen und eine zugängliche Datentabelle neu verstehen, Beispiel_CSS/HTML

Sofern nicht anders angegeben, ist der Inhalt dieser Website unter der Creative Commons-LizenzNamensnennung und nichtkommerzielle Nutzung lizenziert. Bitte respektieren Sie die Früchte Ihrer Arbeit.

Tabellen waren schon immer ein wichtiger Teil des Webdesign- und Produktionsprozesses, sie wurden jedoch hauptsächlich für das Layout verwendet. Bisher habe ich jedoch festgestellt, dass ich Tabellen nicht wirklich verstanden und beherrscht habe Ich muss sie noch einmal verwenden...

Im modernen Webdesign und in der Produktion sollte der Hauptzweck von Tabellen darin bestehen, mehrdimensionale zweidimensionale Daten zu speichern. Zu den mit Tabellen verbundenen Tags gehören table, tr, td, th, tbody, thead, tfoot, col, colgroup und caption. Wie werden diese Tags sinnvoll angewendet? Beginnen wir mit einer Erklärung der Substantive.

Begriffserklärung

Tabelle

2D-Daten anzeigen

tr

Eine Zeile in einer Tabelle

td

Datenzelle

th

Kopfzeilenzellen, die die Kopfzeileninformationen einer Zeile oder Spalte definieren, können nicht in Layouttabellen verwendet werden.

tbody

Eine Zeile oder mehrere Zeilen in der Tabelle werden gruppiert und müssen zusammen mit thead und tfoot verwendet werden

Kopf

Gruppieren Sie eine Zeile oder mehrere Zeilen in der Tabelle und verwenden Sie sie zusammen mit tbody und tfoot

tFuß

Gruppieren Sie eine Zeile oder mehrere Zeilen in der Tabelle und verwenden Sie sie zusammen mit tbody und thehead

col

Spalte, wenden Sie bestimmte Attribute auf eine bestimmte Spalte oder mehrere Spalten an, verwenden Sie sie zusammen mit colgroup

colgroup

Kombination von Spalten, die zusammen mit col verwendet werden

Bildunterschrift

Definieren Sie den Titel der Tabelle, der am Anfang der Tabelle nur einmal verwendet wird

Zusammenfassung

Erklären Sie den Zweck des Formulars

Beispiel:

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