Tabellen-Tags analysieren, td, th, tr nicht mehr verwechseln!

Zusammenfassung

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!

Grundstruktur

td (Tabellendatenzelle)tfoot colspan stellt die Zusammenführung von Spalten dar; rowspan Zeigt die Zusammenführung von Zeilen anCaseZusammenfassungAuß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ß tfootth und den übergeordnetes Element von td Die Beschriftungen sind alle tr, was bedeutet, dass th und td in tr platziert werden müssen

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
		Datenzelle, die spezifischen Daten werden in dieser Beschriftung platziert
		stellt den Tabellenfuß dar
		<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>

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!