Heim > Artikel > Web-Frontend > So legen Sie den Tabellenrand in HTML fest
So legen Sie den Tabellenrand in HTML fest: Erstellen Sie zunächst eine HTML-Beispieldatei. .
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Bereiten Sie einen HTML-Code für die Tabelle vor und verwenden Sie diesen Code, um die Standarddarstellung des Tabellen-Tags durch den Browser anzuzeigen. Der Code lautet wie folgt:
<html> <head> <title></title> </head> <style> </style> <body> <table class="mt"> <tr> <th>col_1</th> <th>col_2</th> <th>col_3</th> </tr> <tr> <td>value_1</td> <td>value_2</td> <td>value_3</td> </tr> </table> </body> </html>
Legen Sie den inneren Rahmen für die Tabelle fest. Es ist ersichtlich, dass der Standardstil der Tabellenbeschriftung keinen Rahmen hat. Jetzt müssen wir der Tabelle nur den folgenden Code hinzufügen:
<style> tr td,th{ border:1px solid red; } </style>
Entfernen Sie den Leerraum zwischen den Zellen, obwohl die Ränder innerhalb der Zeilen wurden festgelegt, die Grenzen zwischen den Zellen. Der Abstand zwischen ihnen ist oft nicht das, was wir wollen, also können wir ihn durch den folgenden Code festlegen:
<style> tr td,th{ border:1px solid red; } /*取消table标签中的单元格空白*/ .mt{ border-collapse:collapse; } </style>
Setzen Sie den äußeren Rahmen für die Tabelle, der Code ist wie folgt:
<style> .mt{ border-collapse:collapse; border:1px solid black; /*设置表格的外边框*/ } </style>
Legen Sie den Zeilenrand relativ zur Zelle fest. Rasterrandeinstellungen und Zeilenrandeinstellungen sind häufiger. Wir müssen nur den folgenden Code verwenden:
<style> .mt{ border-collapse:collapse; border:1px solid black; } /*设置行边框*/ .mt tr{ border-bottom:1px solid black; } </style>
【Empfohlenes Lernen: HTML-Video-Tutorial】
Das obige ist der detaillierte Inhalt vonSo legen Sie den Tabellenrand in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!