So legen Sie Rahmen für Tabellen in CSS fest

So legen Sie den Rahmen einer CSS-Tabelle fest: 1. Verwenden Sie das Border-Attribut, um dem Tabellenelement einen Rahmen hinzuzufügen, die Syntax „table{border:width style color;}“ 2. Verwenden Sie das Border-Attribut, um einen hinzuzufügen border zum td-Element, die Syntax „td{border: width style color;}“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die Standardtabelle hat keine Ränder

<table>
	<tr>
		<td>商品</td>
		<td>价格</td>
	</tr>
	<tr>
		<td>T恤</td>
		<td>￥100</td>
	</tr>
	<tr>
		<td>牛仔褂</td>
		<td>￥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>￥150</td>
	</tr>
</table>

Wir können der Tabelle über CSS Ränder hinzufügen.

Methode 1: Legen Sie den Rahmen nur für die Tabellenbeschriftung fest.

Legen Sie den Rahmenstil (Rand) nur für die Tabellenbeschriftung fest. Dadurch erhält die äußerste Tabelle der Tabelle einen Rahmen, im Inneren wird jedoch kein Rahmenstil generiert der Tisch.

Syntax:

table{
	border: 1px solid red;
}

Rendering:

Methode 2: Legen Sie den Rahmenstil für die Tabelle td fest. Das td im Tabellenobjekt implementiert den Rahmenstil, jedoch den mittleren Teil td führt zum Auftreten eines doppelten Randes.

Grammatik:

td{
border: 1px solid red;
}

Rendering:

Wenn Sie der Meinung sind, dass der Doppellinieneffekt nicht gut aussieht. Sie können Folgendes festlegen:

table {
        border-collapse: collapse;
        
}

Legen Sie das zusammengeführte Randmodell (zusammengeführter Rand) für die Tabelle (Tabelle) fest, das Effektbild:

(Teilen von Lernvideos: CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo legen Sie Rahmen für Tabellen in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!