Zusammenfassung verschiedener Tabellenattribute von HTML (mit Code)-HTML-Tutorial-php.cn

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.

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

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

Wird verwendet, um den Hauptteil der Tabelle zu definieren.

Wird verwendet, um die Fußzeile zu definieren der markierten Tabelle

⚠️:

, muss das Tag enthalten. Tags werden, unabhängig davon, wo sie innerhalb des

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 <!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> Nach dem Login kopieren 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:	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. 5.

　 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

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

Nach dem Login kopieren

Die Wirkung lautet wie folgt:

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:

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.

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

Wird verwendet, um eine Tabellenspaltengruppe zu definieren, die zum Anwenden von Stilen auf eine bestimmte Spalte verwendet werden kann Verwenden Sie auch Folgendes: Das col-Element

hat das lokale Attribut span

, das die Anzahl der Spalten angibt, die die Spaltengruppe umfassen soll. Der Standardwert ist eine Spalte, d. h. das Festlegen des Stils für eine Spalte der Tabelle 　kann ein oder mehrere -Elemente enthalten ;col>

Wird zur Darstellung einer einzelnen Spalte der Tabelle verwendet. Es wird empfohlen, das Element zu verwenden, um die Spanne direkt festzulegen Attribut zum Definieren der Gruppe

hat auch ein lokales Attribut span

　wird innerhalb des Elements von platziert ; stellt eine Spalte in der Gruppe dar. Verwenden Sie dieses Tag, um Stile auf eine Gruppe von Spalten und eine einzelne Spalte der Gruppe anzuwenden.

10,

Wird zum Definieren des Titels der Tabelle verwendet , jede Tabelle kann nur ein -Element enthalten

Ein einfaches Beispiel:

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

Nach dem Login kopieren

Code anzeigen

Die Wirkung ist wie folgt:

Verwandte Empfehlungen:

Einführung in die dynamische Generierung von HTML-Elementen und das Hinzufügen von Attributen zu Elementen (mit Code)

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!

Verwandte Etiketten：

HTML不同表格属性

Quelle：php.cn

Vorheriger Artikel：Einführung in die dynamische Generierung von HTML-Elementen und das Hinzufügen von Attributen zu Elementen (Code im Anhang) Nächster Artikel：Analyse von Metainformations-Meta-Tag-Attributen in HTML (mit Code)

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors