So fügen Sie Rahmen zum Tabellenformular in HTML hinzu-HTML-Tutorial-php.cn

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

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 Zellenabstand So fügen Sie Rahmen zum Tabellenformular in HTML hinzu

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

cellpadding cell margin So 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

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