這篇文章主要介紹了css如何實(shí)現(xiàn)表格樣式，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站是專(zhuān)業(yè)的賈汪網(wǎng)站建設(shè)公司，賈汪接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行賈汪網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
css實(shí)現(xiàn)表格樣式的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后設(shè)置td標(biāo)簽的“colspan、rowspan”屬性；最后通過(guò)設(shè)置“background-color”等樣式實(shí)現(xiàn)表格樣式。
本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。
css怎么實(shí)現(xiàn)表格樣式？
html、css 實(shí)現(xiàn)一個(gè)漂亮的表格
最終效果：利用html、css制作一個(gè)美觀、大方的表格，而且很簡(jiǎn)單，容易上手。
前言：
在css出現(xiàn)之前，網(wǎng)頁(yè)通常使用表格布局；
如今，時(shí)代變了，表格不再適用于網(wǎng)頁(yè)布局，
因?yàn)楸砀竦匿秩舅俣冗^(guò)慢
瀏覽器要將表格渲染完，才會(huì)顯示
不過(guò)，表格還是有用的：
對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，一般在后臺(tái)管理系統(tǒng)中使用到表格
對(duì)于初學(xué)者來(lái)說(shuō)，表格特別容易上手，并且制作出精美的效果
網(wǎng)站通常分為前臺(tái)、后臺(tái)兩部分
前臺(tái)：面向用戶
后臺(tái)：面向管理員（對(duì)界面要求不高，對(duì)功能性要求高）
如今，h6的時(shí)代正在來(lái)臨，我們需要明確一個(gè)觀點(diǎn)，HTML只負(fù)責(zé)網(wǎng)站的骨架，html標(biāo)簽元素是有語(yǔ)義化的（給搜索引擎看的）；而網(wǎng)站的樣式是靠css來(lái)負(fù)責(zé)的
一：表格標(biāo)簽講解
表格（table）
table標(biāo)簽下有這么四個(gè)子標(biāo)簽：caption、thead、tbody、tfoot（可寫(xiě)可不寫(xiě)）
表格標(biāo)題（caption）
表頭（thead）
有子元素 tr
表格主體（tbody）
有子元素 tr
表尾（tfoot）
有子元素 tr
表格是一行一行元素組成的，表格行（tr）
有子元素 th 和 td
表格被行、列劃分為多個(gè)單元，標(biāo)題單元格（th）、單元格（td）
習(xí)慣上，th 出現(xiàn)在thead內(nèi)
二：純HTML效果
確實(shí)丑，但是往后面看，加了css后，丑小鴨就變白天鵝了
html：
代碼又長(zhǎng)又無(wú)趣，我就不把它全部顯示出來(lái)了（tbody標(biāo)簽折疊的內(nèi)容就是10個(gè)tr標(biāo)簽，每個(gè)tr標(biāo)簽內(nèi)部有5個(gè)td標(biāo)簽）
表格的單元格合并
td標(biāo)簽的兩個(gè)屬性：colspan、rowspan
跨列：
跨行：
三：用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;}有興趣的可以繼續(xù)看看：
四：上述CSS中幾個(gè)有意思的知識(shí)點(diǎn)
border-collapse
border-collapse是table標(biāo)簽的一個(gè)屬性，有兩個(gè)取值：
seperate 邊框之間分離
collapse 兩兩相臨邊框合并
:nth-child()
:nth-child()是偽類(lèi)
偽類(lèi)是選擇器的一種
table tbody tr:nth-child(odd)
意思：必須是tr元素，必須是table tbody下的第奇數(shù)個(gè)子元素
正是用這個(gè)偽類(lèi)，我實(shí)現(xiàn)了表格中表格主體內(nèi)的奇數(shù)行和偶數(shù)行的背景顏色不同
（）內(nèi)的參數(shù)：
odd或者2n+1：第奇數(shù)個(gè)
even或者2n：第偶數(shù)個(gè)
6n：第6、12、18、24、… 、6n個(gè)
5：第5個(gè)
:first-child()
:first-child()是偽類(lèi)
table tbody tr td:first-child
意思：選中table tbody tr下，第一個(gè)子元素并且必須是td元素
利用這個(gè)偽類(lèi)，我實(shí)現(xiàn)了將表格主體的第一列全部單元的背景顏色改了
:hover
:hover是偽類(lèi)
table tbody tr:hover
意思：選中鼠標(biāo)懸停的table tbody下tr標(biāo)簽
即我通過(guò)這個(gè)偽類(lèi)，實(shí)現(xiàn)了我鼠標(biāo)懸停在表格主體的某個(gè)地方時(shí)，整行變色
最終效果：利用html、css制作一個(gè)美觀、大方的表格，而且很簡(jiǎn)單，容易上手。
前言：
在css出現(xiàn)之前，網(wǎng)頁(yè)通常使用表格布局；
如今，時(shí)代變了，表格不再適用于網(wǎng)頁(yè)布局，
因?yàn)楸砀竦匿秩舅俣冗^(guò)慢
瀏覽器要將表格渲染完，才會(huì)顯示
不過(guò)，表格還是有用的：
對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，一般在后臺(tái)管理系統(tǒng)中使用到表格
對(duì)于初學(xué)者來(lái)說(shuō)，表格特別容易上手，并且制作出精美的效果
網(wǎng)站通常分為前臺(tái)、后臺(tái)兩部分
前臺(tái)：面向用戶
后臺(tái)：面向管理員（對(duì)界面要求不高，對(duì)功能性要求高）
如今，h6的時(shí)代正在來(lái)臨，我們需要明確一個(gè)觀點(diǎn)，HTML只負(fù)責(zé)網(wǎng)站的骨架，html標(biāo)簽元素是有語(yǔ)義化的（給搜索引擎看的）；而網(wǎng)站的樣式是靠css來(lái)負(fù)責(zé)的
一：表格標(biāo)簽講解
表格（table）
table標(biāo)簽下有這么四個(gè)子標(biāo)簽：caption、thead、tbody、tfoot（可寫(xiě)可不寫(xiě)）
表格標(biāo)題（caption）
表頭（thead）
有子元素 tr
表格主體（tbody）
有子元素 tr
表尾（tfoot）
有子元素 tr
表格是一行一行元素組成的，表格行（tr）
有子元素 th 和 td
表格被行、列劃分為多個(gè)單元，標(biāo)題單元格（th）、單元格（td）
習(xí)慣上，th 出現(xiàn)在thead內(nèi)
二：純HTML效果
確實(shí)丑，但是往后面看，加了css后，丑小鴨就變白天鵝了
html：
代碼又長(zhǎng)又無(wú)趣，我就不把它全部顯示出來(lái)了（tbody標(biāo)簽折疊的內(nèi)容就是10個(gè)tr標(biāo)簽，每個(gè)tr標(biāo)簽內(nèi)部有5個(gè)td標(biāo)簽）
表格的單元格合并
td標(biāo)簽的兩個(gè)屬性：colspan、rowspan
跨列：
跨行：
三：用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;}有興趣的可以繼續(xù)看看：
四：上述CSS中幾個(gè)有意思的知識(shí)點(diǎn)
border-collapse
border-collapse是table標(biāo)簽的一個(gè)屬性，有兩個(gè)取值：
seperate 邊框之間分離
collapse 兩兩相臨邊框合并
:nth-child()
:nth-child()是偽類(lèi)
偽類(lèi)是選擇器的一種
table tbody tr:nth-child(odd)
意思：必須是tr元素，必須是table tbody下的第奇數(shù)個(gè)子元素
正是用這個(gè)偽類(lèi)，我實(shí)現(xiàn)了表格中表格主體內(nèi)的奇數(shù)行和偶數(shù)行的背景顏色不同
（）內(nèi)的參數(shù)：
odd或者2n+1：第奇數(shù)個(gè)
even或者2n：第偶數(shù)個(gè)
6n：第6、12、18、24、… 、6n個(gè)
5：第5個(gè)
:first-child()
:first-child()是偽類(lèi)
table tbody tr td:first-child
意思：選中table tbody tr下，第一個(gè)子元素并且必須是td元素
利用這個(gè)偽類(lèi)，我實(shí)現(xiàn)了將表格主體的第一列全部單元的背景顏色改了
:hover
:hover是偽類(lèi)
table tbody tr:hover
意思：選中鼠標(biāo)懸停的table tbody下tr標(biāo)簽
即我通過(guò)這個(gè)偽類(lèi)，實(shí)現(xiàn)了我鼠標(biāo)懸停在表格主體的某個(gè)地方時(shí)，整行變色
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何實(shí)現(xiàn)表格樣式”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
