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

So installieren Sie Postgres 12 + pgadmin im lokalen Docker (unterstützt Apple M1)

Inhaltsverzeichnis einführen Unterstützt Intel-CP...

Grafisches Tutorial zur Installation und Konfiguration von CentOS 6.4 MySQL 5.7.18

Die spezifischen Schritte zur Installation von my...

So aktivieren Sie die MySQL-Remoteverbindung auf einem Linux-Server

Vorwort Lernen Sie MySQL, um frühere Nicht-MK-Dat...

Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)

Rendern Nachdem ich online nach relevanten Inform...

Analyse des neuen Ressourcenmanagementsystems von CocosCreator

Inhaltsverzeichnis 1. Ressourcen und Konstruktion...

Warum DOCTYPE HTML verwenden?

Sie wissen, dass der Browser ohne diese Option bei...

Detaillierte Erläuterung der Verwendung der Cloud-native-Technologie Kubernetes Scheduling Unit Pod

Die kleinste Planungseinheit in k8s --- pod Im vo...

Tipps zur Verwendung von Frameset zum Zentrieren des Breitbilds

Code kopieren Der Code lautet wie folgt: <fram...

Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion

dieses Schlüsselwort Welches Objekt ruft die Funk...

Nginx: Ein Domänenname für den Zugriff auf mehrere Projekte – Methodenbeispiel

Hintergrund Kürzlich stieß ich bei der Bereitstel...

Über das WeChat-Gleitproblem des UniApp-Editors

Das Uniapp-Applet wird ein ähnliches Dropdown-Pro...

So ändern Sie das Passwort des Root-Benutzers in MySQL

Methode 1: Verwenden Sie den Befehl SET PASSWORD ...

js realisiert die Lupenfunktion der Shopping-Website

In diesem Artikel wird der spezifische Code von j...

So konfigurieren Sie die Neuschreibung von Nginx-Domänennamen und die Auflösung von Platzhalterdomänennamen

In diesem Artikel erfahren Sie, wie Sie Nginx so ...

Beispiel einer Nginx-Standortübereinstimmungsregel

1. Grammatik Standort [=|~|~*|^~|@] /uri/ { ... }...