Heim  >  Artikel  >  Web-Frontend  >  So legen Sie den Tabellenrand in HTML fest

So legen Sie den Tabellenrand in HTML fest

藏色散人
藏色散人Original
2021-04-27 14:46:3547428Durchsuche

So legen Sie den Tabellenrand in HTML fest: Erstellen Sie zunächst eine HTML-Beispieldatei. .

So legen Sie den Tabellenrand in HTML fest

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>

So legen Sie den Tabellenrand in HTML fest

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>

So legen Sie den Tabellenrand in HTML fest

So legen Sie den Tabellenrand in HTML fest

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>

So legen Sie den Tabellenrand in HTML fest

So legen Sie den Tabellenrand in HTML fest

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>

So legen Sie den Tabellenrand in HTML fest

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>

So legen Sie den Tabellenrand in HTML fest

So legen Sie den Tabellenrand in HTML fest

【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!

Stellungnahme:
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