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

Einführung mehrerer benutzerdefinierter Schriftarten in CSS3

Heute habe ich ein Problem in HTML gefunden. Es s...

MAC+PyCharm+Flask+Vue.js-Build-System

Inhaltsverzeichnis Konfigurieren Sie node.js+nvm+...

Problem beim Abrufen des Root-Passworts in MySQL 5.7 unter Linux (getestet und verfügbar)

Inhaltsverzeichnis 1. Abrufen über --skip-grant-t...

Häufig verwendete HTML-Meta-Tag-Attribute (erforderlich für Website-Kompatibilität und -Optimierung)

Original-URL: http://segmentfault.com/blog/ciaocc/...

Installieren Sie Memcached und die PHP Memcached-Erweiterung unter CentOS

In Bezug auf das leistungsstarke verteilte Speich...

Detailliertes Tutorial zur Verwendung von VMware WorkStation mit Docker für Windows

Inhaltsverzeichnis 1. Einleitung 2. Installieren ...

Detailliertes Tutorial zur Installation von Docker unter Windows

Da meine lokale MySQL-Version relativ niedrig ist...

Installation von mysql5.7 und Implementierungsprozess der langfristigen kostenlosen Nutzung von Navicate

(I) Installation von mysql5.7: ❀ Details: Die Ins...

So erhalten Sie Root-Berechtigungen in einem Docker-Container

Zunächst muss Ihr Container laufen Sie können die...

mysql installer community 8.0.12.0 grafische anleitung zur installation

Dieses Tutorial beschreibt die Installation der M...

Eine kurze Einführung in die MySQL MyCat-Middleware

1. Was ist mycat Ein vollständig Open Source-Groß...

Lösung zur inkonsistenten Anzeige der Cursorgröße im Eingabefeld

Die Cursorgröße im Eingabefeld ist inkonsistent De...

Eine "klassische" Falle der MySQL UPDATE-Anweisung

Inhaltsverzeichnis 1. Problematische SQL-Anweisun...

jQuery realisiert den Gleiteffekt des Dropdown-Menüs

Wenn wir eine Webseite erstellen, möchten wir man...

Tipps zur Verwendung von DIV-Containern mit fester Höhe in IE6 und IE7

Es gibt viele Unterschiede zwischen IE6 und IE7 in...