Heim > Artikel > Web-Frontend > So implementieren Sie den Tabellenstil in CSS
So implementieren Sie den Tabellenstil in CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Legen Sie dann die Attribute „colspan, rowspan“ des td-Tags fest. Implementieren Sie schließlich den Tabellenstil, indem Sie Stile wie „background-color“ festlegen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wie implementiert man den Tabellenstil in CSS?
HTML und CSS, um eine schöne Tabelle zu erstellen
Endergebnis: Verwenden Sie HTML und CSS, um eine schöne und großzügige Tabelle zu erstellen, die einfach und benutzerfreundlich ist.
... Die Rendering-Geschwindigkeit von Tabellen ist zu hoch. Langsam. Der Browser zeigt die Tabelle erst an, wenn das Rendern abgeschlossen ist. Die Tabelle ist jedoch weiterhin nützlich:
Für Entwickler werden Tabellen im Allgemeinen im Hintergrundverwaltungssystem verwendet. FürAnfänger ist das Formular besonders einfach zu bedienen und erzeugt exquisite Effekte
Tabelle (Tabelle)
Tabellentitel (Caption)- Unter dem Tabellen-Tag befinden sich vier Untertags: caption, thead, tbody, tfoot (kann geschrieben werden oder nicht) )
Header (thead)
hat das Unterelement trtable body (tbody)
hat sub -element trfoot (tfoot)<td colspan="5"> td>, wie oben, 5 Spaltenzellen in einer Zeile zusammenführen. Zelle <li> über Zeilen hinweg: <code><td rowspan="2"></td>
, 2 Zeilen zusammenführen Zellen in einer Spalte. Drei: Verwenden Sie CSS, um den Tabellenstil zu ändern .png" alt="Bildbeschreibung hier einfügen"/>table{ width: 100%; border-collapse: collapse;}table caption{ font-size: 2em; font-weight: bold; margin: 1em 0;}th,td{ border: 1px solid #999; text-align: center; padding: 20px 0;}table thead tr{ background-color: #008c8c; color: #fff;}table tbody tr:nth-child(odd){ background-color: #eee;}table tbody tr:hover{ background-color: #ccc;}table tbody tr td:first-child{ color: #f40;}table tfoot tr td{ text-align: right; padding-right: 20px;}
Wenn Sie interessiert sind, können Sie weiterlesen: Viertens: Mehrere interessante Wissenspunkte im obigen CSS
border-collapse
border-collapse ist ein Attribut des Tabellen-Tags, es gibt zwei Werte:
seperate
Trennung zwischen Rändern collapse
Zusammenführung zweier benachbarter Grenzen <td colspan="'5'"></td>
,如上,合并一行中的5列单元格<td rowspan="'2'"></td>
,合并一列中的2行单元格三:用CSS修改表格样式
css:
table tbody tr:nth-child(odd)
有兴趣的可以继续看看:
四:上述CSS中几个有意思的知识点
border-collapse
border-collapse是table标签的一个属性,有两个取值:
seperate
边框之间分离collapse
:nth-child() ist eine Pseudoklasse
Pseudoklasse ist eine Art Selektor
table tbody tr td:first-childBedeutung:
muss ein tr-Element sein und das ungerade untergeordnete Element unter der Tabelle tbody
sein
正是用这个伪类,我实现了表格中表格主体内的奇数行和偶数行的背景颜色不同
()内的参数:
odd
或者2n+1
:第奇数个even
或者2n
:第偶数个6n
:第6、12、18、24、… 、6n个5
:第5个:first-child()
:first-child()是伪类
table tbody tr td:first-child
意思:选中table tbody tr下,第一个子元素并且必须是td元素
利用这个伪类,我实现了将表格主体的第一列全部单元的背景颜色改了
:hover
:hover是伪类
table tbody tr:hover
意思:选中鼠标悬停的table tbody下tr标签
即我通过这个伪类,实现了我鼠标悬停在表格主体的某个地方时,整行变色
最终效果:利用html、css制作一个美观、大方的表格,而且很简单,容易上手。
前言:
不过,表格还是有用的:
网站通常分为前台、后台两部分
- 前台:面向用户
- 后台:面向管理员(对界面要求不高,对功能性要求高)
如今,h5的时代正在来临,我们需要明确一个观点,HTML只负责网站的骨架,html标签元素是有语义化的(给搜索引擎看的);而网站的样式是靠css来负责的
一:表格标签讲解
二:纯HTML效果
确实丑,但是往后面看,加了css后,丑小鸭就变白天鹅了
html:
代码又长又无趣,我就不把它全部显示出来了(tbody标签折叠的内容就是10个tr标签,每个tr标签内部有5个td标签)
<td colspan="'5'"></td>
,如上,合并一行中的5列单元格<td rowspan="'2'"></td>
,合并一列中的2行单元格三:用CSS修改表格样式
css:
table{ width: 100%; border-collapse: collapse;}table caption{ font-size: 2em; font-weight: bold; margin: 1em 0;}th,td{ border: 1px solid #999; text-align: center; padding: 20px 0;}table thead tr{ background-color: #008c8c; color: #fff;}table tbody tr:nth-child(odd){ background-color: #eee;}table tbody tr:hover{ background-color: #ccc;}table tbody tr td:first-child{ color: #f40;}table tfoot tr td{ text-align: right; padding-right: 20px;}
有兴趣的可以继续看看:
四:上述CSS中几个有意思的知识点
border-collapse
border-collapse是table标签的一个属性,有两个取值:
seperate
边框之间分离collapse
两两相临边框合并:nth-child()
:nth-child()是伪类
伪类是选择器的一种
table tbody tr:nth-child(odd)
意思:必须是tr元素,必须是table tbody下的第奇数个子元素
正是用这个伪类,我实现了表格中表格主体内的奇数行和偶数行的背景颜色不同
()内的参数:
odd
或者2n+1
:第奇数个even
或者2n
:第偶数个6n
:第6、12、18、24、… 、6n个5
:第5个:first-child()
:first-child()是伪类
table tbody tr td:first-child
意思:选中table tbody tr下,第一个子元素并且必须是td元素
利用这个伪类,我实现了将表格主体的第一列全部单元的背景颜色改了
:hover
:hover是伪类
table tbody tr:hover
意思:选中鼠标悬停的table tbody下tr标签
即我通过这个伪类,实现了我鼠标悬停在表格主体的某个地方时,整行变色
【推荐学习:css视频教程】
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Tabellenstil in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!