Erläuterung des HTML-Tabellenlayouts als Beispiel

Erläuterung des HTML-Tabellenlayouts als Beispiel

Die Elemente in einem HTML-Dokument werden hintereinander angeordnet. Vor und nach den Elementen auf Blockebene werden einfach Zeilenumbrüche eingefügt, wodurch ein optimiertes Layout entsteht. Da die Webseiten, die wir sehen, jedoch nach bestimmten Regeln (normalerweise mehrspaltig) angelegt sind, müssen wir bestimmte Methoden verwenden, um dieses Layout zu erreichen. Die übliche Lösung besteht darin, Blockelemente <div> oder Tabellen (<table>) zu verwenden, um den Inhalt der Webseite zu layouten.

Die Verwendung von Tabellen für das Layout ist eine ältere Layoutlösung. Dies wird nicht empfohlen. Wir sollten zur Anzeige tabellarischer Daten immer Tabellen verwenden.

HTML-Dokumentation

CSS- CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html>
  2. <html lang= "en" >
  3. <Kopf>
  4. <meta charset= "UTF-8" >
  5. <!-- Link zum externen Stylesheet -->
  6. <link rel= "stylesheet" href= "css/meinstyle.css" >
  7. <title>Inselrestaurant</title>
  8. </Kopf>
  9. <Text>
  10. <Tabellen-ID= "Container" >
  11. <!-- Kopfzeile -->
  12. <tr>
  13. <td id= "header" colspan= "2" >
  14. <h1>Bestellsystem</h1>
  15. </td>
  16. </tr>
  17. <!-- Hauptteil -->
  18. <tr>
  19. <!-- Menü -->
  20. <td id= "Menü" >
  21. <b>Gerichte</b><br>
  22. <div id= "Gerichte" >
  23. Hühnereintopf mit Champignons<br>
  24. Hausgemachter Tofu<br>
  25. Pikant-saure Kartoffelstreifen<br>
  26. </div>
  27. </td>
  28. <!-- Inhalt -->
  29. <td id= "Inhalt" >
  30. Hühnereintopf mit Pilzen:
  31. Ein junges Huhn
  32. </td>
  33. </tr>
  34. <!-- Ende -->
  35. <tr>
  36. <td id= "footer" colspan= "2" >Restaurant auf einer säkularen Insel</td>
  37. </tr>
  38. </Tabelle>
  39. </body>
  40. </html>
  41.   

CSS-Dateien

CSS- CodeInhalt in die Zwischenablage kopieren
  1. /*Die Schnittstelle des gesamten Bestellsystems*/   
  2. #Behälter
  3. {
  4.      Breite : 600px ;
  5.      Rand : 100px ;
  6.      /*Rand zwischen Zellrändern löschen*/   
  7.      Rahmenabstand : 0;
  8. }
  9. /*Header der Bestellsystemschnittstelle*/   
  10. #Überschrift   
  11. {
  12.      Hintergrundfarbe : rot ;
  13.      Textausrichtung : zentriert ;
  14. }
  15. h1
  16. {
  17.      Rand unten : 0px ;
  18. }
  19. /*Menü der Bestellsystem-Oberfläche*/   
  20. #Speisekarte   
  21. {
  22.      Hintergrundfarbe : #FFD700 ;
  23.      Höhe : 200px ;
  24.      Breite : 150px ;
  25. }
  26. #Gerichte   
  27. {
  28.      Polsterung oben : 10px ;
  29.      Polsterung links : 10px ;
  30.      Zeilenhöhe : 20px ;
  31. }
  32. /*Gerichtsdetails in der Bestellsystemoberfläche*/   
  33. #Inhalt
  34. {
  35.      Hintergrundfarbe : grau ;
  36.      Höhe : 200px ;
  37.      Breite : 450px ;
  38. }
  39. /*Das Ende der Bestellsystemschnittstelle*/   
  40. #Fußzeile   
  41. {
  42.      Hintergrundfarbe : blau ;
  43.      Höhe : 25px ;
  44.      Textausrichtung : zentriert ;
  45. }

Effektbild:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

<<:  Analyse und Zusammenfassung der Auswirkungen von MySQL-Transaktionen auf die Effizienz

>>:  Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils

Artikel empfehlen

Detailliertes Tutorial zur Verwendung von cmake zum Kompilieren und Installieren von MySQL unter Linux

1. Installieren Sie cmake 1. Entpacken Sie das ko...

Javascript-Countdown-Eingabeaufforderungsfeld

In diesem Artikelbeispiel wird der spezifische Ja...

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)

Diese eingeführten HTML-Tags entsprechen nicht un...

Zusammenfassung der Unterschiede und Verwendung von Plugins und Komponenten in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-...

Der komplette Prozess der iptables-Regeln in Docker geht nach dem Neustart von iptables verloren

Ursachen und Folgen 1. Wenn Sie den Ansible-Befeh...

Einführung in Who-Befehlsbeispiele in Linux

Über wen Zeigt die am System angemeldeten Benutze...

Detaillierte Erläuterung des Front-End-Frameworks für die niedrigschwellige Entwicklung von iOS-, Android- und Miniprogrammanwendungen

Heutzutage ist plattformübergreifende Entwicklung...

Beispiel für die Verwendung von rem zum Ersetzen von px in einem Vue-Projekt

Inhaltsverzeichnis Werkzeug Installieren Sie das ...

Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren

Inhaltsverzeichnis 1. Umweltinstallation 2. Erste...

Eine kurze Analyse der Netzwerkprogrammierfunktionen von Linux

Inhaltsverzeichnis 1. Erstellen Sie einen Socket ...

VMWare15 installiert Mac OS-System (grafisches Tutorial)

Installationsumgebung Windows 10 VMware Workstati...

Wie gestaltet man eine Webseite? Wie erstelle ich eine Webseite?

Wenn es um das Verständnis von Webdesign geht, sc...

Detaillierte Analyse der Auswahl des MySQL-Gemeinschaftsindex und des eindeutigen Index

Nehmen wir ein Benutzerverwaltungssystem an, bei ...

CSS-Menüschaltflächenanimation

Um ein Dropdown-Menü zu schreiben, klicken Sie au...

So lösen Sie das Problem von -bash: /usr/bin/yum: Keine solche Datei oder kein solches Verzeichnis nach der Eingabe von yum in Linux

Nach der Eingabe von yum in Linux erscheint die E...