Ich beherrsche das Table-Tag in HTML nie besonders gut und verwechsle oft td, th und tr. Obwohl natives HTML in der aktuellen Entwicklung selten verwendet wird und grundsätzlich von anderen geschriebene Front-End-Komponenten verwendet werden, werden von anderen geschriebene Tabellenkomponenten im Allgemeinen entsprechend den Ebenen der nativen Tabelle entworfen. [Empfohlen: HTML-Video-Tutorial]
Lassen Sie es uns heute zusammenfassen!
| Tags | Erklärung | Allgemeine Attribute |
|---|---|---|
| Tabelle | Tags der obersten Ebene | border: Breite des Rahmens; width: Ausrichtung der Tabellendaten; cellpadding: Gibt den Abstand zwischen dem Inhalt jeder Zelle und dem Rand an Der Abstand zwischen benachbarten Zellen. thead. Die übergeordnete Beschriftung des Tabellenkopfes Kopf, denn im Allgemeinen hat eine Tabelle nur einen Spaltennamen. Die (Tabellenkopfzelle) stellt die Kopfzelle dar und die Daten darin sind der Spaltenname Das übergeordnete Tag des Formulardatenteils |
| td (Tabellendatenzelle) |
Datenzelle, die spezifischen Daten werden in dieser Beschriftung platziert |
|
| tfoot |
stellt den Tabellenfuß dar |
|
| Case |
<table border="1" cellpadding="2" cellspacing="1" width="500"> <!-- cellpadding表示每个单元格中内容与边框的距离，该值越大，表格给人的视觉感受越大 --> <!-- cellspacing表示每个相邻单元格之间的距离 --> <thead> <!--thead表头--> <tr style="background-color: gray;"> <!-- tr(table row)表头中的一行--> <th>项目</th> <!-- th(table header cell)表示表头单元格，也就是列名 --> <th>单价/元</th> <th>数量/斤</th> <th>金额/元</th> </tr> </thead> <tbody> <!--tbody表格的数据部分 --> <tr> <td>白菜</td> <!-- td（table data cell）是数据单元格，具体的数据就是放在这个标签中 --> <td>1.00</td> <td>3</td> <td>3.00</td> </tr> <tr> <td>西瓜</td> <td>0.50</td> <td>10</td> <td>5.00</td> </tr> </tbody> <tfoot style="background-color: black;color: white;"> <!--tfoot表示表格页脚 --> <tr> <td colspan="4" align="right">合计:8.00</td> <!-- colspan表示列合并 --> <!-- rowspan表示行合并 --> </tr> </tfoot> </table> Nach dem Login kopieren |
|
| Außer dass th und td spezifische Daten angeben können, ähneln die anderen im Grunde den übergeordneten Tags, die keinen spezifischen Inhalt angeben können. th gibt den Spaltennamen in der Tabellenkopfzeile an und td gibt den spezifischen Datenwert an. Die Tabelle ist hauptsächlich in drei Teile unterteilt, nämlich den Kopfzeilenkopf, den Tabellendatenkörper tbody, den Tabellenfuß tfoot |
Das obige ist der detaillierte Inhalt vonTabellen-Tags analysieren, td, th, tr nicht mehr verwechseln!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
