So zentrieren Sie die HTML-Tabelle
HTML wird als Auszeichnungssprache häufig zum Erstellen von Webseiten verwendet. Unter ihnen sind Tabellen ein wichtiges Element für die Organisation von Daten und das Layout. Beim Entwerfen von Tabellen ist die Zentrierung ein häufig verwendeter Stil, um die Seite schöner und lesbarer zu machen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Stylesheets den Zentrierungseffekt von HTML-Tabellen erzielen.
1. Kenntnisse über HTML-Tabellen
In HTML wird das Tag „table“ zum Definieren der Tabelle, das Tag „tr“ zum Definieren der Zeilen der Tabelle und das Tag „td“ zum Definieren der Zellen verwendet. Wir können CSS-Stylesheets verwenden, um den Stil von Elementen zu ändern, einschließlich Tabellenlayout, Farbe, Rahmen usw.
2. Horizontale Zentrierung
- Verwenden Sie das text-align-Attribut
Sie können das text-align-Attribut verwenden, um den Text horizontal zu zentrieren. Zum Beispiel:
table{
text-align:center;
}
Dadurch wird der gesamte Textinhalt innerhalb der Tabellenbeschriftung zentriert, unabhängig davon, in welcher Zelle er sich befindet.
- Verwenden Sie das Randattribut
Wir können auch das CSS-Randattribut verwenden, um eine horizontale Zentrierung zu erreichen. Sie können dem äußeren Element der Tabelle den folgenden Stil hinzufügen:
table{
margin: 0 auto;
}
Dadurch wird die Tabelle unabhängig von ihrer Größe und Position horizontal innerhalb ihres enthaltenden Elements zentriert. Mit dieser Methode können Sie jeweils nur eine Tabelle zentrieren.
3. Vertikale Zentrierung
- Verwenden Sie das Vertical-Align-Attribut von CSS, um eine vertikale Zentrierung zu erreichen, die im Stil der Zelle oder Tabelle (Kopfzeile) festgelegt werden kann. zum Beispiel:
vertical-align: middle;}Dadurch wird der Inhalt in der Zelle vertikal zentriert. Wenn in der Kopfzeile (th) festgelegt, wird die Kopfzeile vertikal zentriert. Hinweis: Die Verwendung des Vertical-Align-Attributs kann nur in der Zelle festgelegt werden, nicht in der Tabelle selbst.
Verwenden Sie die Eigenschaft „line-height“
- Sie können eine vertikale Zentrierung erreichen, indem Sie die Eigenschaft „line-height“ von CSS verwenden. Beispiel:
line-height: 100px;} Stellen Sie die Zellenhöhe auf 100 Pixel und dann die Zeilenhöhe auf 100 Pixel ein, wodurch der Inhalt der Zelle vertikal zentriert wird. Beachten Sie, dass diese Methode nur für eine einzelne Datenzeile funktioniert. FazitDurch CSS-Stylesheets können wir problemlos den zentrierenden Effekt von HTML-Tabellen erzielen. Für die meisten Designer und Entwickler ist die horizontale Zentrierungsmethode relativ einfach, während die vertikale Zentrierungsmethode schwieriger sein kann. Es wird empfohlen, verschiedene Methoden auszuprobieren, um diejenige zu finden, die für Ihr spezifisches Szenario am besten geeignet ist.
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die HTML-Tabelle. 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.
Stock Market GPT
KI-gestützte Anlageforschung für intelligentere Entscheidungen
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
1651
276
So verwenden Sie Del und INS -Tags in HTML
Aug 12, 2025 am 11:38 AM
ThetagisusesedTomarkDeletedText, optional mit dem Datetimeandcitattributestospecifywhen und whyTHEDETIONOCCCURRED.2.THETAGINDICATESSERTEDCONTENT, alsososupportingDatetimeinndciteforcontextheaddition.3.TheSetagsagensetagsagensetagsagensetoagens
So verwenden Sie CSS -Gradienten für Hintergründe
Aug 17, 2025 am 08:39 AM
CsgradientsProvidesmoothColorTransitionSwithoutimages.1.LINEARGRANSITANSCOLORGALONGASTRAILGLINE -UNTERDICECTIONSLIKETOBTOTMORANGLESSHALTS45DEG und SUPPORTMULTIPIPIPECOLORTOPSPORTOPSCUCKICKICKICKLECLECLECLEO
So erstellen Sie Index und SuperScript in HTML
Aug 20, 2025 am 11:37 AM
TocreateSubscriptandsuperscriptTextinHtml, UsetheAndags.1.usetoformatsubscriptText, Suchasinchemicalformulas -LikeH₂o.2
So erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS
Aug 12, 2025 am 09:42 AM
Es ist möglich, einen reaktionsschnellen automatischen Karussellschieber mit reinem CSS zu erstellen. Kombinieren Sie einfach die HTML -Struktur, das Flexbox -Layout und die CSS -Animation. 2. Erstellen Sie zuerst einen semantischen HTML -Container, der mehrere Empfehlungsbegriffe enthält. IITEM enthält Referenzinhalt und Autoreninformationen. 3.. Verwenden Sie den übergeordneten Container, um Anzeige zu setzen: Flex, Breite: 300% (drei Folien) und Überlauf auftragen: versteckt, um eine horizontale Anordnung zu erreichen. 4. Verwenden Sie @KeyFrames, um eine Translatex -Transformation von 0% auf -100% zu definieren und Animation zu kombinieren: Scroll15Slinearinfinite, um nahtloses automatisches Scrollen zu erzielen. 5. Medien hinzufügen
So verwenden Sie das Adress -Tag in HTML
Aug 15, 2025 am 06:24 AM
ThetagisusedTodeFineContactinformationForteAuthorOrOrofadocumentorsection; 1. UseSeitemail, Physicaladdress, PhoneNumber, OrwebsiteurlwithinanArticleOrbody; 2.PlaTITInsideForAuthorContactorinfordocument-Widecontactactactactactactactactactactactactactactactactactactactactacleorbody
So erstellen Sie eine Dropdown -Auswahl in HTML
Aug 16, 2025 am 05:32 AM
Dropdown-Menüs verwenden und erstellen; 2. Fügen Sie Tags und Namen mit den Attributen und Namen hinzu; 3. Setzen Sie die Standardoptionen mit ausgewählten Attributen; 4. Gruppenoptionen; 5. Fügen Sie die erforderlichen Attribute hinzu, um die erforderliche Überprüfung zu erreichen. Ein komplettes HTML-Dropdown-Menü sollte Tags, Namen, Optionengruppierung und Überprüfung enthalten, um vollständige und benutzerfreundliche Funktionen zu gewährleisten.
So verwenden Sie die CSS: Fokus-Pseudoklasse Fokus
Aug 22, 2025 am 11:00 AM
Verwenden Sie die: Fokus-Pseudo-Klasse Fokus, um Elementen, die den Fokus zu verbessern, Styles hinzuzufügen, um die Zugänglichkeit und die Benutzererfahrung zu verbessern. 2. Die grundlegende Syntax legt den Fokuszustandsstil für den Selektor fest: Fokus, der häufig für Formulare, Links und Elemente mit Tabindex verwendet wird; 3. Die Standardfokus -Umriss sollte nicht entfernt werden, und die Sichtbarkeit sollte durch benutzerdefinierte Umriss und hohe Kontrastfarben gewährleistet werden. 4.. Sie können Tabindex zu Elementen wie benutzerdefinierten Schaltflächen hinzufügen und den Fokusstil anwenden; 5. Sie können Pseudoklassen wie: Hover,: ungültig und: in den Fokus, um komplexe Wechselwirkungen zu erreichen, kombinieren; 6. Es wird empfohlen zu verwenden: Fokus aufmerksam, um die Anzeige von Fokusstilen zu realisieren, wenn Sie nur auf der Tastatur navigieren, die Benutzererfahrung verbessern; 7. Immer
So erstellen Sie eine filterbare Galerie in Bootstrap
Aug 22, 2025 am 11:42 AM
Erstellen einer filterbaren Galerie erfordert die Einrichtung der HTML -Struktur, das Hinzufügen von JavaScript -Filterlogik, die optional verbesserte Animationseffekte und die Gewährleistung eines reaktionsschnellen Designs. 1. Verwenden Sie Schaltflächen mit Datenfilterattributen und Galerieprojekten mit Datenkategorie-Attributen zum Erstellen von HTML. 2. Hören Sie die Schaltfläche an, klicken Sie auf Ereignisse über JavaScript, Switch-Schaltflächenstatus und Steuerungsprojektanzeige oder Versteck gemäß Data-Filter-Wert. 3. Durch CSS -Übergang oder JQuery's Fadein/Fadeout kann eine glatte Animation erreicht werden. 4. Verwenden Sie das Bootstrap Grid-System, um das reaktionsschnelle Layout automatisch zu realisieren, und ermitteln Sie schließlich einen frei von Plug-in-freien und Bootstrap-basierten Sound.
