如何讓CSS表格效果更美觀

2020-03-24 19:17:01

字體：大中小

供稿：網(wǎng)友

本文舉例介紹一下CSS中如何使表格看起來更漂亮美觀，在html規(guī)范提供了許多無素和屬性來提高數(shù)據(jù)表格對于這些設(shè)備的可訪問性.1.summary 和 caption第一元素是表格的caption,它基本上用做表格的標題.盡管這不是必須有的元素,但是盡可以使用caption總是好的.另一個元素是summary.summary屬性可以應(yīng)用于表格標簽,用來描述表格的內(nèi)容.與image的alt文本屬性相似.2.thead, tbody, tfootthead, tbody, tfoot使網(wǎng)頁設(shè)計人員能夠?qū)⒈砀駝澐譃榱_輯部分.例如,可以將所有列標題放在thead元素中,這樣就能夠?qū)@個特殊區(qū)域單獨應(yīng)用樣式.如果選擇使用thead或tfoot元素,那么必須至少使用一個tbody元素.在一個表格中只能使用一個thead和tfoot元素,但是可以使用多個tbody元素將復(fù)雜的表格劃分為更容易管理的部分.3.col 和 colgroup行與列標題應(yīng)該使用th標記而不是td,但是如果某些內(nèi)容既是標題又是數(shù)據(jù),那么它仍然使用td.表格標題可以設(shè)置為row或col的scope屬性,定義它們是行標題還是列標題.雖然tr元素使開發(fā)人員能夠整行應(yīng)用樣式,但是很難整列應(yīng)用樣式.為了解決這個問題,w3c引入了colgroup和col元素.colgroup能夠?qū)κ褂胏ol元素定義的一個或多個列進行分組.不幸的是,支持col和colgroup元素的樣式的瀏覽器并不多.以下是html代碼:=============================
table cellspacing="0" id="playlistTable" summary="心情聽吧音樂排行榜,每周一次,給你最好聽音樂享受."
caption
心情聽吧音樂排行榜
/caption colgroup
col id="PlaylistCol" /
col id="trackCol" /
col id="artistCol" /
col id="albumCol" /
/colgroup thead
tr
th id="playlistPosHead" scope="col" 心情聽吧音樂排行榜 /th
th scope="col" 歌曲 /th
th scope="col" 歌手 /th
th scope="col" 專輯 /th
/tr
/thead tbody
tr
td 1 /td
td 我的未來不是夢 /td
td 張雨生 /td
td 未知 /td
/tr tr
td 2 /td
td 昨日重現(xiàn) /td
td 卡朋特 /td
td 未知 /td
/tr tr
td 3 /td
td 我的未來不是夢 /td
td 張雨生 /td
td 未知 /td
/tr tr
td 4 /td
td 昨日重現(xiàn) /td
td 卡朋特 /td
td 未知 /td
/tr tr
td 5 /td
td 我的未來不是夢 /td
td 張雨生 /td
td 未知 /td
/tr tr
td 6 /td
td 昨日重現(xiàn) /td
td 卡朋特 /td
td 未知 /td
/tr tr
td 7 /td
td 我的未來不是夢 /td
td 張雨生 /td
td 未知 /td
/tr tr
td 8 /td
td 昨日重現(xiàn) /td
td 卡朋特 /td
td 未知 /td
/tr tr
td 9 /td
td 我的未來不是夢 /td
td 張雨生 /td
td 未知 /td
/tr tr
td 10 /td
td 昨日重現(xiàn) /td
td 卡朋特 /td
td 未知 /td
/tr /tbody
/table
=========================下面我們來添加css:css規(guī)范有兩個表格邊框模型:單獨的和疊加的.在單獨模型中,在各個單元格周圍有邊框,而在疊加模型中單元格共享邊框.大多數(shù)瀏覽器默認采用單獨模型,因些首先要做的事就是將表格的border-collapse屬性設(shè)置為collapse.為了防止表格太寬,需要限制它的寬度;為了幫助定義表格區(qū)域,添加邊框是個好主意.通過應(yīng)用少量的?直和水平填充,在表格單元格周圍形成一些空白,這也是好想法.---------------------------------
table {
border-collapse: collapse;
width: 50em;
border: 1px solid #666;
}
th, td {
padding: 0.1em 1em;
}
----------------------------------css的border-spacing屬性可以控制單元格之間的距離.不幸的是,windows上的IE6和更低版本不理解這個屬性(別懷疑這件事,因為大多數(shù)人不懂得升級)因此很少使用它.為了去掉單元格之間的默認填充,不得不使用老式但可靠的cellspacing屬性.嚴格地說,這個屬性在本質(zhì)上是表現(xiàn)性的.但是,它仍然是有效的html,而且是當前在IE6中控制單元間距的惟一方法.-------------------------------------- table cellspacing="0" id="playlistTable" summary="心情聽吧音樂排行榜,每周一次,給你最好聽音樂享受." ---------------------------------------完整的css代碼:==============================
table {
border-collapse: collapse;
width: 50em;
border: 1px solid #666;
}caption {
font-size: 1.2em;
font-weight: bold;
margin: 1em 0;
}col {
border-right: 1px solid #ccc;
}col#albumCol {
border: none;
}thead {
background: #ccc url(images/bar.gif) repeat-x left center;
border-top: 1px solid #a5a5a5;
border-bottom: 1px solid #a5a5a5;
}th {
font-weight: normal;
text-align: left;
}#playlistPosHead {
text-indent: -1000em;
}th, td {
padding: 0.1em 0.5em;
}
.odd {
background-color:#edf5ff;
}
tr:hover {
background-color:#3d80df;
color: #fff;
}thead tr:hover {
background-color: transparent;
color: inherit;
}==============================很多朋友都認為 table 標簽沒有用,其實那時候的想法是錯的, table 不用布局,現(xiàn)回到它原來的功能,--顯示數(shù)據(jù)
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：前端開發(fā)手冊文檔大全(內(nèi)含html css jquery html5)手冊

下一篇：最全的CSS樣式整理總結(jié)