HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PMDas Layout Ihrer Tabelle in einem HTML-Dokument kann mithilfe der Eigenschaft width festgelegt und die Breite der Tabelle prozessintern eingeschr?nkt werden, sodass sie unver?ndert bleibt, sodass sie unabh?ngig von der L?nge der Inhalte in den Zellen oder der Browseranzeige unver?ndert bleibt Einstellungen sind. ODER wir k?nnen eine HTML-Eigenschaft namens table-layout verwenden.
Die Eigenschaft ?table-layout“ hilft dabei, eine Reihe von Anweisungen für den Browser zu definieren, die der Browser beim Layouten Ihrer Tabelle sowie der Zellen und Spalten Ihrer Tabelle verwenden soll.
Kurz gesagt kann man also sagen, dass eine Tabellenlayout-Eigenschaft einen Algorithmus enth?lt, der dem Browser zur Befolgung des Layouts Ihrer Tabelle übergeben wird. Für eine Tabellenlayouteigenschaft k?nnen verschiedene Werte festgelegt werden, dies h?ngt jedoch vollst?ndig von der Wahl des Benutzers ab. Die Browser wenden einige Regeln automatisch an und definieren, wie die Zellen und Spalten angeordnet werden, wenn die Eigenschaft table-layout nicht verwendet wird. Diese Regeln werden auch angewendet, wenn der Wert der Tabellenlayouteigenschaft auf ?auto“ gesetzt ist.
Syntax:
Unten finden Sie die einfache Syntax der Tabellenlayout-Eigenschaft.
ObjectName { table-layout:?auto|fixed|initial|inherit; }
HTML-Tabellenlayoutwerte
Die für die Tabellenlayout-Eigenschaft zu verwendenden Werte h?ngen, wie oben besprochen, vollst?ndig von der Designauswahl und dem Geschmack des Programmierers ab und variieren entsprechend. Im Folgenden sind die Werte aufgeführt, die zusammen mit der Eigenschaft ?table-layout“ verwendet werden k?nnen.
1. automatisch
?auto“ ist der Standardwert der Tabellenlayout-Eigenschaft. Das hei?t, selbst wenn der Programmierer die Eigenschaft ?table-layout“ nicht definiert, verwenden die Browser die ?auto“-Einschr?nkungen zum Definieren einer Tabelle und der Zellen- und Spaltenlayouts der Tabelle. Die Breite der Tabelle und der Tabellenzellen h?ngt vom Inhalt in den Zellen ab, d. h. die Breite der Tabelle wird entsprechend dem gr??ten Inhalt in den Zellen angepasst, die Beibehaltung ist unzerbrechlich.
Unten ist ein Beispiel, das ein Tabellenlayout mit ?auto“ als Wert zeigt.
Beispiel
Dieses Beispiel zeigt eine Tabelle mit einer Tabellenbreite von 100 % und dem Tabellenlayoutwert, der auf ?Auto“ eingestellt ist.
Code:
<body> <h2>The <code>table-layout</code> property demo</h2> <table> <thead> <tr> <th>table-layout demo</th> <th>table-layout demo</th> <th>table-layout demo</th> <th>table-layout demo</th> </tr> </thead> <tbody> <tr> <td>This text is much bigger content for the demo. Adding more text here. More text being added?here.</td> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> </tr> <tr> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> </tr> </tbody> <tfoot> <tr> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> </tr> </tfoot> </table> </body>
Ausgabe:
Beachten Sie, dass die Breite der Tabelle entsprechend dem Inhalt der Zellen angepasst wird, die erste Spalte jedoch entsprechend dem gro?en Inhalt in der zweiten Zeile – erste Zelle. W?hrend andere Spalten gleichm??ig aufgeteilt sind, da sie den gleichen Inhalt enthalten.
2. behoben
Der ?feste“ Wert definiert, wie der Name schon sagt, die Tabelle und die Breite ihrer Spalte entsprechend den vordefinierten Breiten der col-Elemente (falls vorhanden) und der Breite der Tabelle. Diese Eigenschaft mit dem Wert ?fest“ kann auch durch die Breite der allerersten Zellenzeile der Tabelle bestimmt werden. Die restliche Breite der Zelle spielt keine Rolle und hat keinen Einfluss auf die Breite der Tabelle.
Wir müssen die Breite der Tabelle angeben, einen Wert anstelle von ?auto“ (ein Standardwert). In den folgenden Beispielen ist die Breite auf 100 % eingestellt.
Beispiel #1
Verwendung der oben erstellten Tabelle, aber Tabellenlayout auf ?festen“ Wert und Tabellenbreite auf 100 %. Die im Programm definierten CSS-Werte sind unten angegeben, der HTML-Code ist derselbe.
Code:
table { width: 100%; margin: 10px auto; table-layout: fixed; }
Ausgabe:
Beispiel #2
Dieses Beispiel zeigt, wie wichtig eine feste Breite einer Zelle ist und welche Auswirkungen sie hat, wenn das Tabellenlayout als feste Eigenschaft verwendet wird.
Hier stellen wir die Breite der ersten Zelle zu Demozwecken auf 400 Pixel ein, um den Unterschied in der Anzeige hervorzuheben. Beachten Sie nun, dass der Eigenschaftswert ?fixed“ keine Auswirkung auf andere Zellen hat, da jede zweite Zelle den gleichen Inhalt hat.
Beispiel #3
Beobachten Sie nun das folgende Beispiel. Diese Tabelle ist die gleiche wie oben, mit einem viel gr??eren Inhalt in einer der anderen Zellen und einer auf 250 Pixel eingestellten Breite.
Beachten Sie, ob die Eigenschaft auf ?Auto“ gesetzt wurde;
table { width: 100%; margin: 10px auto; table-layout: auto; }
Ausgabe:
Aber wenn hier die Eigenschaft ?fixed“ verwendet wird, wird die Tabelle entsprechend umgeschaltet.
table { width: 100%; margin: 10px auto; table-layout:?fixed; }
- It does not touch the fixed width of the first cell.
- Divides the rest of the table equally, no matter the content.[Text Wrapping Break]
There are two more values that are Global Values.
- initial:?This value when used, sets the property to the default initial value.
- inherit:?You can also inherit a table layout design or property from a parent element.
Since when we use the ‘fixed’ table layout algorithm or layout method, your complete table gets rendered as soon as the browser receives the table’s first row and analyzes it. If the table is really large, users will only be able to see the table’s top row if the ‘fixed’ layout method is used which puts up a good effect on users, giving them the impression that the table is getting loaded faster.
Das obige ist der detaillierte Inhalt vonHTML-Tabellenlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hei?e Themen

Loading = "Lazy" ist ein HTML -Attribut für und erm?glicht es der nativen Lader -Ladefunktion des Browsers, die Seitenleistung zu verbessern. 1. Es verz?gert das Laden von Ressourcen nicht zuerst Bildschirm, verkürzt die anf?ngliche Ladezeit, spart Bandbreiten- und Serveranforderungen. 2. Es ist für gro?e Mengen von Bildern oder eingebetteten Inhalten auf langen Seiten geeignet. 3. Es ist nicht für Bilder, kleine Symbole oder faules Laden mit JavaScript geeignet. 4.. Es ist notwendig, mit Optimierungsma?nahmen wie Einstellgr??en und Komprimierungsdateien zusammenzuarbeiten, um Layout -Offsets zu vermeiden und die Kompatibilit?t sicherzustellen. Wenn Sie es verwenden, sollten Sie das Bildlauferlebnis testen und die Benutzererfahrung abw?gen.

Beim Schreiben legaler und ordentlicher HTML müssen Sie auf klare Struktur, korrekte Semantik und standardisiertes Format achten. 1. Verwenden Sie die korrekte Deklaration vom Dokumenttyp, um sicherzustellen, dass der Browser nach dem HTML5 -Standard analysiert wird. 2. Halten Sie das Etikett geschlossen und vernünftig, um zu vermeiden, geschlossene oder falsche Nistelemente zu vergessen. 3. Verwenden Sie semantische Tags wie usw., um die Zug?nglichkeit und SEO zu verbessern. 4. Der Attributwert wird immer in Zitate verpackt, und einzelne oder doppelte Zitate werden einheitlich verwendet. Boolesche Attribute müssen nur existieren, und der Klassenname sollte sinnvoll sein und redundante Attribute vermeiden.

DocType ist eine Anweisung, die dem Browser mitteilt, mit dem HTML -Standard die Seite analysiert werden soll. Moderne Webseiten müssen nur zu Beginn der HTML -Datei geschrieben werden. Seine Funktion besteht darin, sicherzustellen, dass der Browser die Seite eher im Standardmodus als im seltsamen Modus rendert und sich in der ersten Zeile befinden muss, ohne Leerzeichen oder Kommentare davor. Es gibt nur einen richtigen Weg, um es zu schreiben, und es wird nicht empfohlen, alte Versionen oder andere Varianten zu verwenden. Andere wie Charset, Ansichtsfenster usw. sollten teilweise platziert werden.

Die Webseitenstruktur muss durch Kern -HTML -Elemente unterstützt werden. 1. Die Gesamtstruktur der Seite besteht aus dem Stammelement, das Meta -Informationen speichert und den Inhalt anzeigt. 2. Die Inhaltsorganisation stützt sich auf Titel (-), Absatz () und Block-Tags (wie), um die Organisationsstruktur und die SEO zu verbessern; 3. Die Navigation wird durch und implementiert, h?ufig verwendete Organisationen werden mit dem Aria-Strom-Attribut verknüpft und erg?nzt, um die Zug?nglichkeit zu verbessern. 4. Formularinteraktion beinhaltet und, um die vollst?ndigen Eingabebereich- und Einreichungsfunktionen zu gew?hrleisten. Die ordnungsgem??e Verwendung dieser Elemente kann die Klarheit, Wartung und Suchmaschinenoptimierung der Seiten verbessern.

Bei Verwendung von HTML5SSE sind die Methoden zur Umsetzung mit Wiederverbindung und Fehlern: 1. Verst?ndnis des Standard -Wiederverbindungsmechanismus. EventSource erneut 3 Sekunden nach der Unterbrechung der Verbindung standardm??ig unterbrochen. Sie k?nnen das Intervall über das Wiederholungsfeld anpassen. 2. H?ren Sie sich das Fehlerereignis an, um mit Verbindungsfehler oder Parsenfehlern umzugehen, Fehlertypen zu unterscheiden und die entsprechende Logik auszuführen, z. B. Netzwerkprobleme, die sich auf automatische Wiederverbindung stützen, Serverfehler die Wiederverbindung und Authentifizierungsfehler aktualisieren. 3. Steuern Sie aktiv die Wiederverbindungslogik, wie z. B. manuelles Schlie?en und Wiederaufbau der Verbindung, die maximale Anzahl von Wiederholungszeiten und kombinieren Navigator. Diese Ma?nahmen k?nnen die Anwendungsstabilit?t und die Benutzererfahrung verbessern.

Hinweise zur Verwendung von HTML -Tags: 1. Es muss vom Titelattribut begleitet werden, um die vollst?ndige Bedeutung der Abkürzung wie HTML zu definieren. 2. Verwenden Sie einheitlich anstatt weggeworfene Tags; 3. Verwenden Sie nur bei Bedarf, vermeiden Sie das Nisten und passen Sie den Standardstil über CSS an, um die Zug?nglichkeit und SEO -Effekte zu verbessern.

Client-sideFormvalidationCanbedoneWithoutjavaScriptByusinghtmlattributes.1) UseSequeured toEnforcemandatoryfields.2) ValateMailsandurlswithTypeattributes-?hnlichemailorurl, orusepatternwithrExforcustomformaten

ThespellCheckattributeInHtmlControlswhetherBrowserSCheckforsspellingErsideInlaBeContent.Whenettotrue, BrowsertypicalunderLinemisspelledwords, w?hrend
