css怎么实现表格样式
本文操作環(huán)境:windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。
css怎么實現(xiàn)表格樣式?
html、css 實現(xiàn)一個漂亮的表格
最終效果:利用html、css制作一個美觀、大方的表格,而且很簡單,容易上手。
前言:
- 在css出現(xiàn)之前,網(wǎng)頁通常使用表格布局;
- 如今,時代變了,表格不再適用于網(wǎng)頁布局,
- 因為表格的渲染速度過慢
瀏覽器要將表格渲染完,才會顯示
不過,表格還是有用的:
- 對于開發(fā)者來說,一般在后臺管理系統(tǒng)中使用到表格
- 對于初學(xué)者來說,表格特別容易上手,并且制作出精美的效果
如今,h5的時代正在來臨,我們需要明確一個觀點,HTML只負(fù)責(zé)網(wǎng)站的骨架,html標(biāo)簽元素是有語義化的(給搜索引擎看的);而網(wǎng)站的樣式是靠css來負(fù)責(zé)的
一:表格標(biāo)簽講解
- 表格(table)
table標(biāo)簽下有這么四個子標(biāo)簽:caption、thead、tbody、tfoot(可寫可不寫) - 表格標(biāo)題(caption)
- 表頭(thead)
有子元素 tr - 表格主體(tbody)
有子元素 tr - 表尾(tfoot)
有子元素 tr - 表格是一行一行元素組成的,表格行(tr)
有子元素 th 和 td - 表格被行、列劃分為多個單元,標(biāo)題單元格(th)、單元格(td)
習(xí)慣上,th 出現(xiàn)在thead內(nèi)
二:純HTML效果
確實丑,但是往后面看,加了css后,丑小鴨就變白天鵝了
html:
代碼又長又無趣,我就不把它全部顯示出來了(tbody標(biāo)簽折疊的內(nèi)容就是10個tr標(biāo)簽,每個tr標(biāo)簽內(nèi)部有5個td標(biāo)簽)
- 表格的單元格合并
td標(biāo)簽的兩個屬性:colspan、rowspan - 跨列:
<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;}
登錄后復(fù)制
有興趣的可以繼續(xù)看看:
四:上述CSS中幾個有意思的知識點
border-collapse
border-collapse是table標(biāo)簽的一個屬性,有兩個取值:
seperate邊框之間分離collapse兩兩相臨邊框合并
:nth-child()
:nth-child()是偽類
table tbody tr:nth-child(odd)
登錄后復(fù)制
意思:必須是tr元素,必須是table tbody下的第奇數(shù)個子元素
正是用這個偽類,我實現(xiàn)了表格中表格主體內(nèi)的奇數(shù)行和偶數(shù)行的背景顏色不同
()內(nèi)的參數(shù):
odd或者2n+1:第奇數(shù)個even或者2n:第偶數(shù)個6n:第6、12、18、24、… 、6n個5:第5個
:first-child()
:first-child()是偽類
table tbody tr td:first-child
登錄后復(fù)制
意思:選中table tbody tr下,第一個子元素并且必須是td元素
利用這個偽類,我實現(xiàn)了將表格主體的第一列全部單元的背景顏色改了
:hover
:hover是偽類
table tbody tr:hover
登錄后復(fù)制
意思:選中鼠標(biāo)懸停的table tbody下tr標(biāo)簽
即我通過這個偽類,實現(xiàn)了我鼠標(biāo)懸停在表格主體的某個地方時,整行變色
最終效果:利用html、css制作一個美觀、大方的表格,而且很簡單,容易上手。
前言:
- 在css出現(xiàn)之前,網(wǎng)頁通常使用表格布局;
- 如今,時代變了,表格不再適用于網(wǎng)頁布局,
- 因為表格的渲染速度過慢
瀏覽器要將表格渲染完,才會顯示
不過,表格還是有用的:
- 對于開發(fā)者來說,一般在后臺管理系統(tǒng)中使用到表格
- 對于初學(xué)者來說,表格特別容易上手,并且制作出精美的效果
如今,h5的時代正在來臨,我們需要明確一個觀點,HTML只負(fù)責(zé)網(wǎng)站的骨架,html標(biāo)簽元素是有語義化的(給搜索引擎看的);而網(wǎng)站的樣式是靠css來負(fù)責(zé)的
一:表格標(biāo)簽講解
- 表格(table)
table標(biāo)簽下有這么四個子標(biāo)簽:caption、thead、tbody、tfoot(可寫可不寫) - 表格標(biāo)題(caption)
- 表頭(thead)
有子元素 tr - 表格主體(tbody)
有子元素 tr - 表尾(tfoot)
有子元素 tr - 表格是一行一行元素組成的,表格行(tr)
有子元素 th 和 td - 表格被行、列劃分為多個單元,標(biāo)題單元格(th)、單元格(td)
習(xí)慣上,th 出現(xiàn)在thead內(nèi)
二:純HTML效果
確實丑,但是往后面看,加了css后,丑小鴨就變白天鵝了
html:
代碼又長又無趣,我就不把它全部顯示出來了(tbody標(biāo)簽折疊的內(nèi)容就是10個tr標(biāo)簽,每個tr標(biāo)簽內(nèi)部有5個td標(biāo)簽)
- 表格的單元格合并
td標(biāo)簽的兩個屬性:colspan、rowspan - 跨列:
<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;}
登錄后復(fù)制
有興趣的可以繼續(xù)看看:
四:上述CSS中幾個有意思的知識點
border-collapse
border-collapse是table標(biāo)簽的一個屬性,有兩個取值:
seperate邊框之間分離collapse兩兩相臨邊框合并
:nth-child()
:nth-child()是偽類
table tbody tr:nth-child(odd)
登錄后復(fù)制
意思:必須是tr元素,必須是table tbody下的第奇數(shù)個子元素
正是用這個偽類,我實現(xiàn)了表格中表格主體內(nèi)的奇數(shù)行和偶數(shù)行的背景顏色不同
()內(nèi)的參數(shù):
odd或者2n+1:第奇數(shù)個even或者2n:第偶數(shù)個6n:第6、12、18、24、… 、6n個5:第5個
:first-child()
:first-child()是偽類
table tbody tr td:first-child
登錄后復(fù)制
意思:選中table tbody tr下,第一個子元素并且必須是td元素
利用這個偽類,我實現(xiàn)了將表格主體的第一列全部單元的背景顏色改了
:hover
:hover是偽類
table tbody tr:hover
登錄后復(fù)制
意思:選中鼠標(biāo)懸停的table tbody下tr標(biāo)簽
即我通過這個偽類,實現(xiàn)了我鼠標(biāo)懸停在表格主體的某個地方時,整行變色
【推薦學(xué)習(xí):css視頻教程】
以上就是css怎么實現(xiàn)表格樣式的詳細(xì)內(nèi)容,更多請關(guān)注風(fēng)君子博客其它相關(guān)文章!
總結(jié)
以上是生活随笔為你收集整理的css怎么实现表格样式的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Medoo 开源项目发布,超轻量级的PH
- 下一篇: 俄美两位同龄天才,影响了 20 世纪数学