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>