简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

So fügen Sie Rahmen zum Tabellenformular in HTML hinzu

青灯夜游
Freigeben： 2018-09-25 13:43:52
Original
7449 Leute haben es durchsucht

In diesem Kapitel erfahren Sie, wie Sie Rahmen zu Tabellenformularen in HTML hinzufügen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Im Allgemeinen verursacht das Hinzufügen von Rändern zu Tabellen unterschiedliche Probleme. Das Folgende ist eine bessere Möglichkeit, die Tabelle nach dem Hinzufügen von Rändern anzuzeigen 

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>
Nach dem Login kopieren
Nach dem Login kopieren

Je nach unterschiedlichen Anforderungen benötigen wir jedoch manchmal unterschiedliche Stile. Hier werde ich eine Zusammenfassung und Analyse der Faktoren erstellen, die den Tabellenrand beeinflussen

>Wie im ↑ Bild gezeigt, ist border=1, was bedeutet, dass zu jeder Zelle und jedem Rand der Tabelle ein 1-Pixel-Rand hinzugefügt wird

2. 0" > Zellenabstand ZellenabstandSo fügen Sie Rahmen zum Tabellenformular in HTML hinzu

Wie im ↑ Bild gezeigt, beträgt die Tabellengröße: 200*118px

3.

cellpadding cell marginSo fügen Sie Rahmen zum Tabellenformular in HTML hinzu

Wie im ↑ Bild gezeigt, beträgt die Tabellengröße: 200*110px

4. Entfernen Sie alle Attributwerte der Tabelle in der Tabelle CSS, wie im ↑ Bild gezeigt, haben wir dieses Mal festgestellt, dass der Rahmen in CSS tatsächlich nur einen äußeren Rand zur Tabelle hinzufügt So fügen Sie Rahmen zum Tabellenformular in HTML hinzu

5. border-collapse: Collapse Border Merge, dieses Attribut legt fest, ob der Rand der Tabelle wird zu einem einzigen Rahmen zusammengeführt oder wie im Standard

separat wie in HTML angezeigt. Zu diesem Zeitpunkt möchten wir der Tabelle nur einen Rahmen als Ganzes hinzufügen und tun dies nicht Wir brauchen Ränder und Abstände, eigentlich müssen wir nur so schreiben: 

<style>
    table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}   
</style>

<table border="1">
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>
Nach dem Login kopieren

Wie in der Abbildung gezeigt↓

So fügen Sie Rahmen zum Tabellenformular in HTML hinzu

6. Wir können es deutlich sehen Im Bild oben ist zu erkennen, dass die von den beiden Browsern analysierten Ränder unterschiedlich sind. Aber eigentlich sind sie gleich. Beide fügten gleichzeitig Farbe zum Rand hinzu, aber da unser td und th standardmäßig eine Standardfarbe haben und wir ihnen hier keinen Stil hinzugefügt haben, um die standardmäßige schwarze Linie abzudecken, führte dies zu der Situation in Firefox. Tatsächlich ist diese Situation auch in Google verfügbar, aber es ist nicht offensichtlich, dass die standardmäßigen schwarzen Linien von unserer Farbe abgedeckt werden. Zu diesem Zeitpunkt werden wir nur schwarze Kanten finden um th und td Farbstile hinzuzufügen. Aber 

 table tr th, table tr td { border-color:#b6ff00; }
Nach dem Login kopieren

Wie im Bild gezeigt ↓

7. Wenn Sie von oben genau hinsehen, werden Sie es tun Ich finde immer noch, dass etwas nicht stimmt. Dies ist tatsächlich immer noch der Fall. Der Grund, warum wir der Tabelle am Anfang hinzugefügt haben, ist, dass wir der Tabelle einen standardmäßigen schwarzen Linienstil hinzugefügt haben. Wie wir oben gesagt haben, haben th, td und table alle standardmäßig schwarze Ränder. Wenn also dieses Problem vollständig gelöst werden muss, damit der Rand normal angezeigt werden kann, sollte es wie folgt geschrieben werden: So fügen Sie Rahmen zum Tabellenformular in HTML hinzu

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>
Nach dem Login kopieren
Nach dem Login kopieren

Um es zusammenzufassen:

Die Attribute der Tabelle in HTML:

So fügen Sie Rahmen zum Tabellenformular in HTML hinzu border= „1“

: Fügen Sie einen 1 Pixel großen schwarzen Rand zur gesamten Tabelle hinzu (einschließlich die Tabelle und jede Zelle), was in CSS dem Folgenden entspricht: table, table tr th, table tr td { border: 1px solid #0094ff; >: Der Zellenrand ist gleich 0 und sein Standardwert ist 1 Pixel, was entspricht: {padding: 0;}


cellspacing="0"

: Der Zellenabstand beträgt gleich 0 und sein Standardwert ist 2px, was in CSS äquivalent zu „border-collapse:collapse“ ist, aber nicht genau dasselbe. Der Zellenabstand ist nur der Abstand, während „border-collapse“ benachbarte Kanten zu einer Kante zusammenführt und so das Problem vermeidet von verdickten Kanten, die durch überlappende Kanten im Zellabstand verursacht werden. Daher wird hier nicht empfohlen, den Zellenabstand beim Festlegen des Tabellenrands mithilfe von HTML-Attributen auf 0 zu setzen. Wenn Sie möchten, dass er gleich 0 ist, wird eher empfohlen, CSS-Stilattribute zum Festlegen des Tabellenrands zu verwenden und border- zu verwenden. Collapse: Collapse, um die Ränder zusammenzuführen, anstatt den Zellenabstand auf 0 zu setzen, was zu dem Problem führt, dass überlappende Kanten verdickt werden.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Rahmen zum Tabellenformular in HTML hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
html
Quelle：php.cn
Vorheriger Artikel：Usability-Vergleich von div und table auf Websites Nächster Artikel：So führen Sie externe Seiten in HTML ein (Iframe-Tag-Methode)
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Der Randradius funktioniert nicht für img innerhalb des Ankerpunkts Ich verwende den folgenden HTML-Code: <aclass="-video-detail-qualifiers-branding&q...
Aus 2024-04-06 17:20:25
0
1
347
Warum ist mein HR-Tag durchscheinend, wenn es auf die einfarbige Farbe Weiß eingestellt ist? Ich habe ein HTML (mit Bootstrap) und ein CSS, in meinem HTML habe ich ein <hr>-Tag,...
Aus 2024-04-06 16:13:26
0
1
500
Unterer CSS-Rand in der Navigationsleiste Ich habe eine Navigationsleiste und habe unten eine rote Linie hinzugefügt, wenn der Mausz...
Aus 2024-04-06 15:04:41
0
2
347
Die Polsterung des Elternteils wird vom klebrig positionierten Kind ignoriert Wie kann verhindert werden, dass klebrige Elemente hinter den Header gelangen? Das aktuell...
Aus 2024-04-06 11:42:51
0
1
338
SASS-Stile haben Vorrang vor Medienabfragen Ich versuche, Medienabfragen zu verwenden, um Stile für Desktop-Geräte zu überschreiben, a...
Aus 2024-04-05 15:03:00
0
1
3396
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！