Detaillierte Erklärung der HTML-Tabellen-Tags (für Anfänger geeignet)
|
TABELLE> <TR> <TD> <TH> <BESCHRIFTUNG> ■ <TABELLE> <TR> <TD>: Diese drei Tags sind die wichtigsten Tags zum Definieren einer Tabelle. Man kann sagen, dass es ausreicht, nur diese drei zu lernen. <TABLE> ist ein Container-Tag. Das bedeutet, dass es verwendet wird, um zu deklarieren, dass es sich um eine Tabelle handelt und andere Tabellen-Tags nur innerhalb ihres Gültigkeitsbereichs anwendbar sind. Es gibt auch andere Container-Tags. <TR> dient zur Markierung von Tabellenzeilen. <TD> dient zur Kennzeichnung der Speicherzelle Parametereinstellungen für <TABLE> (häufig verwendet): Zum Beispiel: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2"> Breite="400" Tabellenbreite, akzeptiert absolute Werte (z. B. 80) und relative Werte (z. B. 80 %). Grenze="1" Dicke des Tabellenrahmens. Verschiedene Browser haben unterschiedliche Standardwerte, geben Sie diese also bitte an. Zellenabstand="2" Rasterdicke der Tabelle. Siehe Beispiel 3, in dem das Raster auf 5 verdickt dargestellt ist. cellpadding="2" Der Abstand zwischen Text- und Rasterlinien. Siehe Beispiel 4, wo die Polsterung auf 10 erhöht wird. ausrichten="MITTE" Die Platzierungsposition der Tabelle (horizontal). Die optionalen Werte sind: links, rechts, zentriert. Siehe Beispiel 5 oder 6. Die Tabelle wird in der Mitte platziert. Um zu verhindern, dass einige Browser dies unterstützen, wird das Center-Tag <CENTER> hinzugefügt. Dies ist nur eine mehrschichtige Garantie. Natürlich ist auch nur <CENTER> akzeptabel. valign="TOP". Die vertikale Platzierungsposition von Kalligraphie und Malerei in der Tabelle. Die optionalen Werte sind: oben, Mitte, unten. Hintergrund="myweb.gif" Verwenden Sie mit BGColor kein Tischpapier. bgcolor="0000FF" Hintergrundfarbe der Tabelle. Verwenden Sie sie nicht zusammen mit dem Hintergrund. Siehe Beispiel 6. Rahmenfarbe = "FF00FF" Tabellenrahmenfarbe, NC und IE haben unterschiedliche Effekte, siehe Beispiel sechs. Rahmenfarbehell = "00FF00" Die Farbe des dem Licht zugewandten Teils des Tabellenrahmens finden Sie in Beispiel 2. 『Nur für IE』 bordercolordark="#00FFFF" Die Farbe des hinterleuchteten Teils des Tabellenrahmens. Siehe Beispiel 2. Wenn bordercolorlight oder bordercolordark verwendet wird, ist bordercolor ungültig. 『Nur für IE』 cols="2" Die Anzahl der Tabellenfelder erlaubt es dem Browser nur, die gesamte Tabelle vor dem Herunterladen darzustellen. Parametereinstellungen von <TR> (häufig verwendet): Zum Beispiel: <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000"> align="RIGHT" Die horizontale Platzierungsposition von Kalligraphie und Malerei in dieser Spalte. Die optionalen Werte sind: links, Mitte, rechts. valign="MITTE" Die vertikale Platzierungsposition von Kalligraphie und Malerei in dieser Spalte. Die optionalen Werte sind: oben, Mitte, unten. bgcolor="0000FF" Die Hintergrundfarbe dieser Spalte finden Sie in Beispiel 5. Rahmenfarbe = "FF00FF" Die Rahmenfarbe dieser Spalte finden Sie in Beispiel 3. 『Nur für IE』 bordercolorlight="#808080" Die Farbe des dem Licht zugewandten Teils der Spaltenumrandung, siehe Beispiel 3. 『Nur für IE』 bordercolordark="#FF0000" Die Farbe des hinterleuchteten Teils des Rahmens dieser Spalte. Siehe Beispiel 3. Wenn bordercolorlight oder bordercolordark verwendet wird, ist bordercolor ungültig. 『Nur für IE』 Parametereinstellungen von <TD> (häufig verwendet): Beispiel: <td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> width="48%" Die Zellenbreite akzeptiert sowohl absolute Werte (z. B. 80) als auch relative Werte (z. B. 80%). Höhe="400" Die Höhe der Speicherzelle. colspan="5" Die Anzahl der Spalten, die rechts von der Zelle geöffnet werden sollen. Bitte sehen Sie sich Beispiel 6 an rowspan="4" Die Anzahl der Zeilen, um die sich die Zelle nach unten öffnet. Siehe Beispiel 6 align="RIGHT" Die horizontale Position der Kalligraphie oder Malerei in dieser Speicherzelle. Die optionalen Werte sind: links, Mitte, rechts. valign="UNTEN" Die vertikale Platzierungsposition der Kalligraphie oder Malerei in dieser Speicherzelle. Die optionalen Werte sind: oben, Mitte, unten. bgcolor="FF00FF" Die Hintergrundfarbe dieser Zelle finden Sie in Beispiel 4. Grenzecolor="808080" Die Rahmenfarbe dieser Zelle finden Sie im Beispiel 3. 『Nur für IE』 bordercolorlight="#FF0000" Die Farbe des lichtzugewandten Teils des Zellrands. Siehe Beispiel 3. 『Nur für IE』 bordercolordark="#00FF00" Die Farbe des Hintergrundbeleuchtungsteils des Zellrahmens. Siehe Beispiel 3. Wenn bordercolorlight oder bordercolordark verwendet wird, ist bordercolor ungültig. 『Nur für IE』 background="myweb.gif" Dieses karierte Ablagepapier verwenden Sie entweder BGColor. Beispiel 1: <Tabellenbreite="60%" Grenze="1"> <tr><td>Eine Tabelle mit nur einer Zelle</td></tr> Beispiel 2 einer Ergebnistabelle mit nur einer Zelle: <Tabellenbreite="60%" Grenze="5" Grenzefarbehell="FF00FF" Grenzefarbedunkel="FF0000"> <tr><td>Erste Spalte, erste Spalte</td><td>Erste Spalte, zweite Spalte</td></tr> </table> Ergebnisse anzeigen Spalte 1 Spalte 1 Spalte 1 Spalte 2 Beispiel 3: <Tabellenbreite="60%" Grenze="1" Zellenabstand="5"> <tr bordercolor="#0000FF"> <td>Erste Spalte, erste Zeile</td> <td>Erste Spalte, zweite Zeile</td> </tr> <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> <td>Zweite Spalte, erste Spalte</td> <td>Zweite Spalte, zweite Spalte</td> </tr> </table> Ergebnisse anzeigen 1. Spalte 1. Spalte 1. Spalte 2. Spalte 2. Spalte 1. Spalte 2. Spalte Beispiel 4: <Tabellenbreite="60%" Grenze="1" Zellpadding="10"> <tr> <td bgcolor="#FFCCE6">Erste Spalte, erste Zeile</td> <td bgcolor="#FFFFC6">Erste Spalte, zweite Zeile</td> </tr> <tr> <td bgcolor="#FFD9FF">Zweite Spalte, erste Spalte</td> <td bgcolor="#DAB4B4">Zweite Spalte, zweite Spalte</td> </tr> </table> Ergebnisse anzeigen Erste Spalte Erste Spalte Erste Spalte Zweite Spalte Zweite Spalte Erste Spalte Zweite Spalte Beispiel 5: Quellcode <Mitte> <Tabellenbreite="60%" Zellenabstand="0" Zellenpadding="2" Ausrichtung="MITTE"> <tr> <td bgcolor="#FFD2E9">Erste Spalte, erste Zeile</td> <td bgcolor="#FFDAB5">Erste Spalte, zweite Zeile</td> <td bgcolor="#FFFFB5">Erste Spalte, dritte Zeile</td> </tr> <tr bgcolor="#C0C0C0"> <td>Zweite Spalte, erste Spalte</td> <td>Zweite Spalte, zweite Spalte</td> <td>Zweite Spalte, dritte Spalte</td> </tr> </Tabelle> </center> Ergebnisse anzeigen Beispiel 6 Quellcode <center> <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF"> <tr> <td>Erste Zeile, erste Spalte</td> <td colspan="2">Erste Zeile, zweite und dritte Spalte</td> </tr> <tr> <td rowspan="2">Erste Spalte der zweiten und dritten Zeile</td> <td>Zweite Zeile, zweite Spalte</td> <td>Zweite Zeile, dritte Spalte</td> </tr> <tr> <td>Spalte 3, Spalte 2</td> <td>Spalte 3, Spalte 3</td> </tr> </Tabelle> </center> Ergebnisse anzeigen ■ <TH>: <TH> und <TD> markieren beide eine Zelle, der einzige Unterschied besteht darin, dass der Text in der mit <TH> markierten Zelle fett erscheint. Wird normalerweise in der ersten Zeile einer Tabelle verwendet, um Spalten zu markieren. Seine Verwendung besteht darin, die Position von <TD> zu ersetzen. Informationen zu seiner Parametereinstellung finden Sie unter <TD>. Wenn Sie dem Text in der mit <TD> markierten Zelle die Fettschrift <B> hinzufügen, hat dies natürlich die gleiche Wirkung wie <TH>. Beispiel: Quellcode <Mitte> <Tabellenbreite="350" Rahmen="1" Zellenabstand="0" Zellenpadding="2" Ausrichtung="MITTE"> <tr align="CENTER"> <th>Monat</th><th>% der Besucher aus IE</th><th>% der Besucher aus NC</th> </tr> <tr align="CENTER"> <td>August</td><td>61 %</td><td>39 %</td> </tr> <tr align="CENTER"> <td>Juli</td><td>54 %</td><td>46 %</td> </tr> <tr align="CENTER"> <td>Juni</td><td>52 %</td><td>48 %</td> </tr> </Tabelle> </center> Ergebnisse anzeigen ■ <CAPTION> ： Die Funktion von <CAPTION> besteht darin, eine Titelspalte für die Tabelle zu markieren, genau so, als würden Sie über der Tabelle eine offene Spalte ohne Gitternetzlinien hinzufügen. Natürlich kann es auch weiter unten platziert werden und wird normalerweise zum Speichern des Tabellentitels verwendet. Parametereinstellungen von <CAPTION> (häufig verwendet): Beispiel: <caption align="TOP" valign="TOP"></caption> align="TOP" Die horizontale Position der Tabellenüberschrift relativ zur Tabelle. Mögliche Werte sind: left, center, right, top, middle, bottom. Bei align="bottom" erscheint die Überschrift unterhalb der Tabelle, egal ob Sie im Quelltext die <caption> an den Anfang oder das Ende der <table> setzen. valign="TOP" Die Position der Tabellentitelspalte relativ zur Tabelle (nach oben oder unten). Die optionalen Werte sind: oben, unten. Dies ist dasselbe wie align="TOP" oder align="BOTTOM". Obwohl die Funktionen wiederholt werden, können beide Parameter verwendet werden, wenn die Titelspalte unten platziert und rechts oder links eingefügt werden soll. Wenn nur ein Parameter vorhanden ist, bevorzugen Sie bitte align, da valign ein Parameter ist, der erst in HTML 3.0 eingeführt wurde. Beispiel: <Mitte> <Tabellenbreite="350" Rahmen="1" Zellenabstand="0" Zellenpadding="2" Ausrichtung="MITTE"> <caption>Analyse der Browsernutzung der Besucher von Web Express im August</caption> <tr align="CENTER"> <th>Monat</th> <th>% der Besucher aus IE</th> <th>% der Besucher aus NC</th> </tr> <tr align="CENTER"> <td>August</td> <td>61 %</td> <td>39 %</td> </tr> </Tabelle> </center> |
<<: Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft
Artikel empfehlen
So verwalten Sie zwischengespeicherte Seiten in Vue
Inhaltsverzeichnis Problem 1: Zerstörung 1. Wie m...
Detaillierte Erklärung der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue3
Seit der Geburt von vue3 ist viel Zeit vergangen ...
Detaillierte Erläuterung der Redis-Master-Slave-Replikationspraxis mit Docker
Inhaltsverzeichnis 1. Hintergrund 2. Bedienungssc...
HTML n Möglichkeiten zum Erreichen eines alternativen Farbcode-Beispielcodes
In diesem Artikel wird hauptsächlich der Beispiel...
So erfassen Sie Ausnahmen in React
Inhaltsverzeichnis Vorwort Fehlergrenze Jenseits ...
Installations- und Konfigurationsschritte für die grüne Dekomprimierungsversion von MySQL
Schritte: 1. MySQL-Datenbank installieren 1. Lade...
Exquisiter Snake-Implementierungsprozess in JavaScript
Inhaltsverzeichnis 1. HTML-Struktur erstellen 2. ...
Lösung zum automatischen Neustart von MySQL
Vorwort Kürzlich trat in der Testumgebung ein Pro...
Einführung in useRef und useState in JavaScript
Inhaltsverzeichnis 1. useState-Hook 2. useRef-Hoo...
Implementierung der Fastdfs+Nginx-Clusterkonstruktion
1. Einführung in Fastdfs 1. Was ist Fastdfs? Fast...
MySQL-Triggersyntax und Anwendungsbeispiele
Dieser Artikel veranschaulicht anhand von Beispie...
Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft
Das Projekt wurde in diesen Tagen getestet und de...
Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3
Einführung in strukturelle Pseudoklassenselektore...
Einführung in gängige Befehle und Tastenkombinationen in Linux
Inhaltsverzeichnis 1 Systemeinführung 2 Systemver...
Verwenden von Nginx zum Implementieren der Graustufenversion
Unter Graustufenfreigabe versteht man eine Freiga...