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 stellen Sie mit Docker schnell einen Elasticsearch-Cluster bereit

In diesem Artikel werden Docker Container (orches...

Detaillierte Erklärung der HTML-Formularelemente (Teil 1)

HTML-Formulare werden verwendet, um verschiedene ...

Detaillierte Erklärung des Inline-Formats von HTML-Tabellen

Inline-Format <colgroup>…</colgroup> ...

Zeichnen eines Feuerwerkseffekts von 2021 basierend auf JS mit Quellcode-Download

Diese Arbeit nutzt das Wissen der Front-End-Entwi...

Architektur und Komponentenbeschreibung der privaten Docker-Bibliothek Harbor

In diesem Artikel wird die Zusammensetzung der Ha...

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Vorwort Wenn beim kontinuierlichen Code-Delivery-...

30 hervorragende Beispiele für Farbabstimmung im Webdesign

Heute habe ich in diesem Artikel 30 hervorragende ...

Erhalten Sie schnell Datenbankverbindungsinformationen und einige Erweiterungen über Zabbix

Hintergrund Da die Anzahl der Anwendungssysteme w...

Vier Möglichkeiten zum Wechseln von Registerkarten in VUE

Inhaltsverzeichnis 1. Statische Implementierungsm...

Anzeigen und Analysieren des MySQL-Ausführungsstatus

Wenn Sie den Eindruck haben, dass ein Problem mit...

MySQL-Abfrage-Cache und Pufferpool

1. Caches - Abfrage-Cache Die folgende Abbildung ...

Mausposition in CSS abbilden und Seitenelemente durch Mausbewegungen steuern (Beispielcode)

Ob das Mapping der Mausposition oder das Implemen...

Eine vollständige Erklärung der MySQL-Hochverfügbarkeitsarchitektur: MHA-Architektur

Inhaltsverzeichnis 1. Einleitung 2. Zusammensetzu...

Wie werden Vue-Komponenten analysiert und gerendert?

Vorwort In diesem Artikel wird erklärt, wie Vue-K...

Eine Falle und Lösung bei der Verwendung von fileReader

Inhaltsverzeichnis Eine Falle bei fileReader Fall...