Worauf sollten Sie beim Festlegen von Tabellen-CSS-Stilen achten?-CSS-Tutorial-php.cn

Worauf sollten Sie beim Festlegen von Tabellen-CSS-Stilen achten?

php中世界最好的语言

Freigeben： 2018-05-15 13:52:04

Original

2357 Leute haben es durchsucht

Wir wissen, dass es viele CSS-Stile für Tabellen gibt. Heute werde ich Ihnen eine detaillierte Erklärung der CSS-Stileinstellungen für Tabellen geben, auf die beim Festlegen des CSS-Stils geachtet werden muss Blätter für Tabellen

Das Tabellen-Tag wird an mehreren Stellen auf einer Webseite verwendet. Zu diesem Zeitpunkt kann das Festlegen des Stils für das angegebene Tabellenobjekt noch über CSS gesteuert werden.

Tatsächlich wird es manchmal viel einfacher, wenn wir darüber nachdenken, Tabellen-Tags als DIV-Tags zum Layouten und Festlegen von CSS zu verwenden.

Stile für die Tabelle festlegen

Geben Sie den Tabellenstil innerhalb des Objekts an, indem Sie den entsprechenden übergeordneten Tabellenstil benennen

Vollständiger HTML+CSS-Code des Falls

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>指定对象内table设置样式</title> 
<style> 
.p{ width:400px} 
.p table{ background:#CCC; color:#F00} 
.p table td{ background:#FFF} 
</style> 
</head> 
<body> 
<p class="p"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
<tr> 
<td>内容一</td> 
<td>内容一</td> 
<td>内容一</td> 
</tr> 
<tr> 
<td>内容二</td> 
<td>内容</td> 
<td>内容</td> 
</tr> 
</table> 
</p> 
</body> 
</html>

Nach dem Login kopieren

Zusammenfassung

Das Obige spezifiziert die Tabelle und td durch das übergeordnete Element, um den CSS-Stil festzulegen.

Verwenden Sie das Tabellenlayout an mehreren Stellen, indem Sie eine separate ID oder Klasse für die Tabelle festlegen

Wenn Sie zu diesem Zeitpunkt den Stil direkt auf dem Tabellen-Tag festlegen, wird das Tabellenlayout in der Die Webseite wird zu diesem Zeitpunkt eingerichtet. Zu diesem Zeitpunkt müssen Sie der Tabelle nur ID- oder Klasseneinstellungen hinzufügen, um die Tabelleneinstellungen zu unterscheiden, die CSS-Stile erfordern.

CSS für Tabellen-td festlegen

Im Tabellen-Weblayout ist es im Allgemeinen erforderlich, Stile für td festzulegen, z. B. das Festlegen der Zeilenhöhe, des Abstands usw. für td, die alle wirksam sind.

Der fertige HTML+CSS-Code lautet wie folgt:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>指定对象内table td设置样式</title> 
<style> 
 
.p-td{ width:400px} 
.p-td table td{ background:#CCC; color:#000; line-height:40px} 
</style> 
</head> 
<body> 
<p class="p-td"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
<tr> 
<td>内容一</td> 
<td>内容一</td> 
<td>内容一</td> 
</tr> 
<tr> 
<td>内容二</td> 
<td>内容</td> 
<td>内容</td> 
</tr> 
</table> 
</p> 
</body> 
</html>

Nach dem Login kopieren

Legen Sie den Stileffekt für das td in der angegebenen Tabelle fest

Das Obige wird per CSS festgelegt der td-Stil der Tabelle im angegebenen Objekt.

Abweichendes Denken: Wenn Sie unterschiedliche CSS-Stile für ein bestimmtes Tabellen-TD festlegen möchten, können Sie dem TD Klassen hinzufügen, um unterschiedliche Stileinstellungen zu erreichen.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So machen Sie DIV zu einer adaptiven Höhe

So verwenden Sie CSS, um den Textinhalt des auszublenden Bildhintergrund

Gemeinsame Möglichkeiten, native JS zu organisieren

Das obige ist der detaillierte Inhalt vonWorauf sollten Sie beim Festlegen von Tabellen-CSS-Stilen achten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!