HTML5 Form_ Power Node Java College

Die Rolle der Tabelle besteht darin, die zwei dimensionalen Daten anzuzeigen. , es wird später eingeführt). Im Folgenden wird hauptsächlich HTML -Elemente zum Erstellen von Tabellen eingeführt.

Die Grundelemente des Formulars umfassen: Tabelle, TR und TD.

Die Tabelle repräsentiert die Tabelle im HTML -Dokument, die das Grenzattribut unterstützt, um die Breite des Rahmens zu definieren.

TR repräsentiert die Linie in der Tabelle;

TD repräsentiert die Zellen in der Tabelle, einschließlich der folgenden Attribute:

1) colspan: Die Anzahl der Säulen, die Zellen überqueren können;

2) Rowspan: Die Anzahl der Zeilen, die Zellen überqueren können;

3) Header: Standards Der Kopf -bezogene Header der Zelle erzeugt keine visuellen Änderungen in gewöhnlichen Browsern, kann jedoch von Bildschirmlesern verwendet werden.

 <table> <tr> <td> apples </td> <td> grün </td> <td> Medium </td> </tr> <td> orangen </td> <td> orange </td> <td> groß </td> </tr> </table>

Das obige definiert eine Tabelle mit zwei Zeilen und drei Spalten.

Wenn Sie das Randattribut des Tabellenelements verwenden, können Sie der Tabelle Grenzen hinzufügen.

 <Table Border = 1> <tr> <td> apples </td> <td> grün </td> </tdium </td> </tr> <td> orangen </td> <td> orange </ td> <td> groß </td> </tr> </table>

Der Standardgrenze des Browsers ist nicht sehr schön und muss normalerweise CSS verwenden, um den Rahmenstil für verschiedene Elemente festzulegen.

Die Verwendung der Colspan- und Rowspan -Attribute der Zelle kann unregelmäßige Tabellen erstellen, sodass einige Zeilen oder Spalten der Tabelle mehrere Zellen umfassen.

 <Table Border = 1> <ter> <th> Monat </th> <th> Einsparungen </th> </tr> <td colorPan = 2> Januar </td> </tr> <ter> <td colorPan = 2> Februar </td> </tr> </table>

Das Folgende ist ein Beispiel für eine Zelle, die mehrere Linien kreuzt:

 <Table Border = 1> <ter> <th> Monat </th> <th> Einsparungen </th> </tr> <td> Januar </td> <td> $ 100.00 </td> <td rowspan = 2> $ 50 </td> </tr> <td> Februar </td> <td> $ 10.00 </td> </table>

Das TH -Element wird verwendet, um dem Formular einen Header hinzuzufügen, mit dem Daten und Erklärungen von Daten unterschieden werden können. Das Element unterstützt die folgenden Attribute:

1) colspan: Die Anzahl der Säulen, die Zellen überqueren können;

2) Rowspan: Die Anzahl der Zeilen, die Zellen überqueren können;

3) Umfang: Definieren Sie die Methode zur Zusammenfassung der Kopfdaten mit Einheitsdaten;

3) Header: Die durch den Raum getrennte Header -ID -Liste wird mit einer Header -Informationen für die Datenzelle enthalten.

 <table> <ter> <th> Rang </th> <th> Name </th> <Th> Farbe </th> </th> </tr> <Th> Favorit: nicht/td> <td> Orange </td> <td> groß </td> </tr> <ter> <th> 3rd Favorit: </th> <td> pomegraanat </td> <td> Eine Art von grün-rot </ Td> <td> variiert von Medium bis groß </td> </tr> </table>

TH und TD können in einer Linie verwendet werden.

Die Verwendung von TD -Headern kann mit den Zellen verbunden sein. Das Header -Attribut kann der ID -Attributwert eines oder mehrerer Th -Zellen sein:

 <Table border = 1 width = 100%> <ter> <th id = name> name </th> <th id = E -Mail> E -Mail </th> <th id = Telefon> Telefon> Telefon </th> <th ID = Adresse> Adresse </th> </tr> <ter> <td headers = name> George Bush </td> <td headers = E -Mail> [email protected] </td> <td headers = Telefon> + 789451236 </td> <td Headers = Adresse> Fifth Avenue New York, USA </td> </tr> </table>

Durch die Verwendung von TH -Colspan- und Rowspan -Attributen können komplexe Tabellen konstruieren.

 <Table Border = 1> <tr> <th colspan = 2> Firma in den USA </th> </tr> <th> Name </th> <th> adDr </th> </tr> tr> <td > Apple, Inc. </td> <td> 1 Infinite Loop Cupertino, CA 95014 </td> </tr> <td> Google, Inc. </td> 1600 Amphitheater Parkway Mountain View, CA 94043 </td> </tr> </table>

Sie können Thead-, Tbody- und Tfoot -Elemente verwenden, um der Form Strukturen hinzuzufügen, damit Sie jedem Teil der Form einen CSS -Stil hinzufügen können, um einfacher zu werden.

1) Tischthema

Das TBODY -Element repräsentiert die gesamte Zeile des Themas der Form, ausgenommen die Header (die Darstellung der Elemente) und die Roller (TFOOT -Elementdarstellung).

Beachten Sie, dass die meisten Browser das TBODY -Element bei der Verarbeitung von Tabellenelementen automatisch einfügen.

2) Header formen

Das Element wird verwendet, um die Titellinie der Form zu markieren. Wenn es kein Element gibt, werden alle TR -Elemente als Teil des Themas der Form angesehen.

3) Fußnote hinzufügen

Tfoot -Elemente werden verwendet, um die Form der Form zu markieren. Vor HTML5 können Tfoot -Elemente nur vor dem TBODY -Element erscheinen, und in HTML5 darf das TFOOT -Element das TFOOT -Element nach Tbody platzieren.

Im Folgenden finden Sie ein umfassendes Beispiel, das TBODY-, THEAD- und TFOOT -Elemente verwendet.

 <table> <d> <ter> <th> Rang </th> <Th> Name </th> <th> Farbe </th> <Th> Größe </th> </thead> </thead> < tfoot> <ter> <th> Rang </th> <th> Name </th> <th> Farbe </th> </th> </tr> </tfoot> <tr> <ter> <th> Favorit: <Th> <td> Äpfel </td> <td> grün </td> <em> Medium </td> </tr> <Tr> <Th> 2. Favorit: </th> <td> Orangen </td> <td> orange </td> <td> groß </td> </tr> <tr> <Th> 3. Favorit: </th> <td> pomegraanat </td> <td> Eine Art von greeny-rot </td> <td> variiert von Medium bis groß </td> </tr> </tbody> </table>

Die Verwendung des Bildunterschriftenelements kann einen Titel für das Formular definieren und ihn mit dem Formular assoziieren.

 <table> <Caption> Ergebnisse der 2011 Fruit Surve </thead> <tfoot> <ter> <th> Rang </th> <th> Name </th> <th> Farbe </th> <Th> Größe </th> nicht> <ter> <th> 2. Favorit: </th> <td> orange </td> <td> orange </td> <td> groß </td> </tr> <trd favorit: </th> <td> pomegranat </td </td </td </td </td > <td> Eine Art von grün-rot </td> <td> variiert von Medium bis groß </td> </tbody> </table>

Eine Form kann nur ein Bildunterschrift Element enthalten, nicht das erste Element der Form, sondern wird immer über der Tabelle angezeigt.

In der Tabelle ist der Betrieb der Spalte nicht bequem, z. B. ein Definitionsstil einer Spalte der Form der Form. Sie können das ColGroup -Element verwenden, um die Gruppe anzugeben.

 <html> <kopf> <style> #colryp1 {Hintergrundfarbe: rot} #colryp2 {Hintergrundfarbe: Green; = 1> <colorp id = colorP1 span = 2> </colorP> <colorp id = colorp2> </colorP> <ter> </th> </th> </th> nicht td> <td> Mein erstes CSS </Td> <td> $ 47 </td> </tr> </table> </body> </html>

Das obige Beispiel gibt die Gruppe von zwei Spalten an. Das Span -Attribut von ColGroup gibt die Erweiterungen an.

 <html> <kopf> <style> #colryp1 {Hintergrundfarbe: rot} #col3 {Hintergrundfarbe: grün; border = 1> <colGroup id = colorP1> <col id = col1and2 span = 2/> <col id = color3/> </colorP> <ter> </th> <th> Titel </th> <th> Preis </th> </tr> <l> <td> 3476896 </td> <td> Mein erstes Html </td> <td> $ 53 </td> </tr> <td> 2489604 </td> <td> Mein erstes CSS </td> <td> $ 47 </td> </table> </body> </html>

Das oben genannte ist der Inhalt dieses Artikels.