XHTML-Einführungstutorial: Anwendung von Tabellen-Tags
|
<br />Tabelle ist ein umständliches Tag in XHTML, daher müssen Sie es nur in diesem Abschnitt verstehen. Bevor CSS populär wurde, wurden Tabellen häufig zur Positionierung verwendet. In XHTML wird die Positionierung von Tabellen nicht empfohlen und das W3C hofft, dass CSS <table> bei der Positionierung ersetzen kann. Da die Verwendung von CSS-Layouts jedoch häufig viel handgeschriebenen Code erfordert (gängige Webdesign-Software wie Dreamweaver unterstützt die Anzeige von div nicht perfekt), wird <table> von vielen Websites immer noch für das Layout von Homepages verwendet. Beispielsweise verwendet die Seite „Weitere Produkte“ von Google Tabellen zur Positionierung. Ich persönlich empfehle Ihnen jedoch, CSS zur Positionierung Ihrer Seiten zu verwenden, da sich das Web in diese Richtung bewegt. Natürlich kann das Ersetzen von Tabellen durch CSS in der Anfangsphase große Probleme verursachen. Tabellen-Tag <table> In XHTML ist das Tag zum Erstellen einer Tabelle <table>. Beim Schreiben des Codes verwenden wir zuerst das Tag <tr>, um die Tabelle in Zeilen zu unterteilen, und verwenden dann das Tag <td>, um jede Zeile in Zellen zu unterteilen. Es ist sehr schwierig und ineffizient, eine Tabelle vollständig durch handschriftlichen Code zu erstellen. Das Erstellen einer Tabelle in einer Software zur Webseitenerstellung ist jedoch genauso einfach wie in Word. Sie müssen nur einfache Eigenschaften wie Zeilen und Spalten auswählen. Es kann jedoch vorkommen, dass die automatisch generierte Tabelle die Anforderungen nicht erfüllt und im Codemodus angepasst werden muss. Daher müssen wir weiterhin über ein allgemeines Verständnis der spezifischen Schreibmethoden von XHTML-Tabellen-Tags verfügen. Eigenschaften der Tabellenränder Das <table>-Tag kann ein Rahmenattribut haben. Wenn Sie für die Rahmeneigenschaft keinen Wert festlegen, zeigt der Browser den Tabellenrahmen standardmäßig nicht an. Tabellenübung Lassen Sie uns ein Etikett mit vier Zeilen und zwei Spalten erstellen. Der Code lautet wie folgt: <table border="1"> <tr> <td>ein Gitter</td> <td>ein Gitter</td> </tr> <tr> <td>ein Gitter</td> <td>ein Gitter</td> </tr> <tr> <td>ein Gitter</td> <td>ein Gitter</td> </tr> <tr> <td>ein Gitter</td> <td>ein Gitter</td> </tr> </Tabelle> Die angezeigten Ergebnisse sind wie folgt: Beachten Sie den obigen Code, es gibt 4 Paare von <tr>, die den 4 Zeilen darunter entsprechen. Und jede <tr> (Zeile) hat zwei <td>-Zellen. Es wird also eine Tabelle mit 4 Zeilen und 2 Spalten. Zum Auflisten von Daten und anderen Informationen reicht eine Tabelle mit derartigen Rastern aus, Tabellen zur Positionierung sind jedoch in der Regel komplizierter. Wir betonen noch einmal, dass wir die Verwendung von Tabellen zur Positionierung nicht empfehlen. Deshalb stellen wir <table> hier nur kurz vor. |
<<: jQuery implementiert ein atmendes Karussell
>>: Docker-Compose erstellt schnell Schritte für ein privates Docker-Warehouse
Artikel empfehlen
Optimierung von JavaScript und CSS zur Verbesserung der Website-Leistung
<br /> Im ersten und zweiten Teil haben wir ...
Leitfaden für Anfänger zum Erstellen einer Website ⑦: Es ist so einfach, eine schöne Website zu erstellen
Ich habe einmal versprochen, dass ich so lange wei...
Erste Schritte mit dem Animieren von SVG-Pfadstrichen mit CSS3
Ohne auf JavaScript angewiesen zu sein, wird rein...
Übersicht über die Unterschiede zwischen Linux TTY/PTS
Wenn wir einen Buchstaben auf der Tastatur eingeb...
Eine kurze Erläuterung der Rolle und Funktionsweise von Schlüsseln in Vue3
Welche Funktion hat dieses Schlüsselattribut? Sch...
Implementierung des gemeinsamen Grid-Layouts
Keine Lücken auf beiden Seiten, Lücken zwischen j...
Tomcat verwendet Log4j zur Ausgabe des catalina.out-Protokolls
Das Standardprotokoll von Tomcat verwendet java.u...
Das Vue-Cropper-Plugin realisiert die Kapselung der Bildaufnahme- und Upload-Komponente
Der spezifische Code zum Einkapseln der Bildaufna...
Teilen Sie 8 CSS-Tools zur Verbesserung des Webdesigns
Wenn das Website-Design bearbeitet oder geändert ...
Nachdem Webpack-cli erfolgreich installiert wurde, prüfen Sie den Fehlerfall webpack -v für Details.
Inhaltsverzeichnis Frage 1. Installieren Sie webp...
Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden
Problemerklärung: Wenn Sie die CSS-Eigenschaft „a...
Lösen Sie das Problem, dass dem Benutzer „root“@„%“ der Zugriff auf die Datenbank „xxx“ verweigert wurde, nachdem eine Datenbank in MySQL erstellt wurde.
Vorwort Ich hatte kürzlich ein Problem bei der Ar...
Beispiel für die Erzeugung eines Flügelschlags eines Schmetterlings mit reinem CSS3
Mit reinem CSS3 lässt sich ein Schmetterling mit ...
CSS3 realisiert Partikelanimationseffekte beim Matching von Königen
Beim Codieren werden Sie feststellen, dass viele ...
Automatische Zeilenumbrüche in HTML-Pre-Tags
Zu diesem Zeitpunkt können Sie overflow:auto; verw...