Heim > Artikel > Web-Frontend > Zusammenfassung verschiedener Tabellenattribute von HTML (mit Code)
Zusammenfassung verschiedener Tabellenattribute von HTML (mit Code)
- 不言Original
- 2018-07-21 11:38:542057Durchsuche
Dieser Artikel gibt Ihnen eine Zusammenfassung der verschiedenen Tabellenattribute von HTML (mit Code). Der Inhalt ist sehr gut. Ich hoffe, er kann allen helfen.
Hier fassen wir hauptsächlich einige Attribute und einfache Stile der Tabelle zusammen und zeichnen sie auf, um zukünftige Anforderungen zu erleichtern.
1. Es handelt sich um eine Tabelle, die zum Definieren von HTML verwendet wird, wobei lokale Attribute border den Wert von darstellen Das Rahmenattribut muss 1 oder die leere Zeichenfolge ("") sein. Dieses Attribut steuert nicht den Stil des Rahmens, sondern wird durch CSS gesteuert Tabellenelemente können tr, th, td, thead, tbody, tfoot, colgroup-Elemente haben 2 . wird verwendet, um eine Zeile der Tabelle zu definieren. Da HTML-Tabellen zeilenorientiert sind, muss jede Zeile separat dargestellt werden Das tr-Element kann innerhalb der Tabellen-, thead-, tbody- und tfoot-Elemente verwendet werden Das tr-Element kann eines oder mehrere enthalten td Oder das Element Seine align-, bgcolor- und anderen Attribute sind veraltet. Wenn Sie Attribute festlegen möchten, verwenden Sie bitte die CSS-Einstellungen 3, wird zum Definieren von Tabellenzellen verwendet. Es kann mit den lokalen Attributen colspan, rowspan und headers verwendet werden. (1)colspan: Spaltenspanne, dieses Attribut gibt die Spalten an, die die Zelle kann sich über eine Zahl erstrecken, der Wert dieses Attributs muss eine Ganzzahl sein (2) rowspan: Zeilenspanne, dieses Attribut gibt die Anzahl der Zeilen an, die die Zelle umfassen kann, der Wert dieses Attributs muss eine sein Ganzzahl 3) Überschriften: Der Wert dieses Attributs ist der ID-Attributwert einer oder mehrerer Zellen, der die Zellen mit Spaltenüberschriften verknüpft und mit Bildschirmleseprogrammen verwendet werden kann ⚠️: jeder Die Tabelle muss die oben genannten drei Elemente enthalten Ein einfaches Beispiel Die Wirkung lautet wie folgt: 4. Wird zum Definieren von Kopfzellen verwendet, sodass wir Daten effektiv unterscheiden können seine Beschreibung Es Die gleichen lokalen Attribute wie <td> Elemente haben die gleichen lokalen Attribute. Der Unterschied zwischen den beiden ist wie folgt: 5.
Wird verwendet, um den Header der Tabelle und den Wrapper des Headers zu definieren. Sie können eine oder mehrere Zeilen definieren, die Spaltenbezeichnungen von Tabellenelementen sind Ohne das Element „head“ wird davon ausgegangen, dass alle tr zum Hauptteil der Tabelle gehören 6.
Wird verwendet, um den Hauptteil der Tabelle zu definieren. 7.
Wird verwendet, um die Fußzeile zu definieren der markierten Tabelle ⚠️: , hat das lokale Attribut span 10, Code anzeigen Verwandte Empfehlungen: Das obige ist der detaillierte Inhalt vonZusammenfassung verschiedener Tabellenattribute von HTML (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
<!DOCTYPE html><html>
<body>
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body></html>
ist die Kopfzeile, die sich normalerweise in der ersten Zeile oder Spalte befindet. Darüber hinaus wird der Text in standardmäßig fett gedruckt,
Zelle.
enthalten. Tags werden, unabhängig davon, wo sie innerhalb des -Tags platziert sind, dem Kopf bzw. dem Ende der Tabelle zugewiesen. kann vor oder nach stehen. Vor HTML5 muss das -Element vor dem -Element stehen >
<!DOCTYPE html><html>
<head>
<style>
thead th,tfoot th {
text-align: left;
background: grey;
color: white }
tbody th {
text-align: right;
background: lightgrey;
color: grey }
/* tbody td {
background: greenyellow;
} */
#colgroup1 {
background-color: blueviolet }
#col3 {
background-color: yellow;
font-size: small }
</style>
</head>
<body>
<table>
<colgroup id="colgroup1">
<col id="collAnd2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"></colgroup>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank Footer</th>
<th>Name Footer</th>
<th>Color Footer</th>
<th colspan="2">Size And Votes Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>CSS</td>
<td>Java</td>
<td>IOS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Web</td>
<td>HTML5</td>
<td>CS</td>
<td>460</td>
</tr>
</tbody>
</table>
</body></html>
In Verbindung stehende Artikel
Mehr sehen