css怎麼實作表格樣式-css教學-PHP中文網

css實作表格樣式的方法：先建立一個HTML範例檔案；然後設定td標籤的「colspan、rowspan」屬性；最後透過設定「background-color」等樣式來實現表格樣式。

css怎麼實作表格樣式

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

css怎麼實作表格樣式？

html、css 實作一個漂亮的表格

##最終效果：

利用html、css製作一個美觀、大方的表格，而且很簡單，容易上手。 css怎麼實作表格樣式

#前言：

在css出現之前，網頁通常會使用表格佈局；
如今，時代變了，表格不再適用於網頁佈局，

瀏覽器要將表格渲染完，才會顯示

對開發者來說，一般在後台管理系統中使用到表格對於

來說，表格特別容易上手，並且製作出精美的效果

網站通常分為前台、後台兩部分

。面向使用者

後台：面向管理員（對介面要求不高，對功能性要求高）

如今，h5的時代正在來臨，我們需要明確一個觀點，HTML只負責網站的骨架，html標籤元素是有語意化的（給搜尋引擎看的）；而網站的樣式是靠css來負責的

一：表格標籤講解

css怎麼實作表格樣式

#表格（table）
table標籤下有這麼四個子標籤：caption、thead、tbody、tfoot（可寫可不寫）
##表頭（thead）
表格主體（tbody）
表格尾（tfoot）
表格是一行一行元素組成的，表格行（tr）
##表格被行、列劃分為多個單元，標題單元格（th）、單元格（td）
習慣上，th 出現在thead內

# #二：純HTML效果

確實醜，但往後面看，加了css後，醜小鴨就變成白天鵝了

css怎麼實作表格樣式
html ：

程式碼又長又無趣，我就不把它全部顯示出來了（tbody標籤折疊的內容就是10個tr標籤，每個tr標籤內部有5個td標籤）

css怎麼實作表格樣式

td標籤的兩個屬性：colspan、rowspan
，如上，合併一行中的5列單元格
，合併一列中的2行單元格

三：用CSS修改表格樣式

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怎麼實作表格樣式

最终效果：利用html、css制作一个美观、大方的表格，而且很简单，容易上手。

css怎麼實作表格樣式

前言：

在css出现之前，网页通常使用表格布局；
如今，时代变了，表格不再适用于网页布局，
因为表格的渲染速度过慢
浏览器要将表格渲染完，才会显示

不过，表格还是有用的：

对于开发者来说，一般在后台管理系统中使用到表格
对于初学者来说，表格特别容易上手，并且制作出精美的效果

网站通常分为前台、后台两部分

前台：面向用户

后台：面向管理员（对界面要求不高，对功能性要求高）

如今，h5的时代正在来临，我们需要明确一个观点，HTML只负责网站的骨架，html标签元素是有语义化的（给搜索引擎看的）；而网站的样式是靠css来负责的

一：表格标签讲解

css怎麼實作表格樣式

表格（table）
table标签下有这么四个子标签：caption、thead、tbody、tfoot（可写可不写）
表格标题（caption）
表头（thead）
有子元素 tr
表格主体（tbody）
有子元素 tr
表尾（tfoot）
有子元素 tr
表格是一行一行元素组成的，表格行（tr）
有子元素 th 和 td
表格被行、列划分为多个单元，标题单元格（th）、单元格（td）
习惯上，th 出现在thead内

二：纯HTML效果

确实丑，但是往后面看，加了css后，丑小鸭就变白天鹅了
css怎麼實作表格樣式
html：

代码又长又无趣，我就不把它全部显示出来了（tbody标签折叠的内容就是10个tr标签，每个tr标签内部有5个td标签）
css怎麼實作表格樣式

表格的单元格合并
td标签的两个属性：colspan、rowspan
跨列：<td colspan="'5'"></td>，如上，合并一行中的5列单元格
跨行：<td rowspan="'2'"></td>，合并一列中的2行单元格

三：用CSS修改表格样式

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标签的一个属性，有两个取值：