table CSS制作好看的網(wǎng)頁表格

2024-07-11 08:26:38

字體：大中小

供稿：網(wǎng)友

幸運(yùn)的是html規(guī)范提供了許多無素和屬性來提高數(shù)據(jù)表格對(duì)于這些設(shè)備的可訪問性.
1.summary 和 caption
第一元素是表格的caption,它基本上用做表格的標(biāo)題.盡管這不是必須有的元素,但是盡可以使用caption總是好的.另一個(gè)元素是summary.summary屬性可以應(yīng)用于表格標(biāo)簽,用來描述表格的內(nèi)容.與image的alt文本屬性相似.
2.thead, tbody, tfoot
thead, tbody, tfoot使網(wǎng)頁設(shè)計(jì)人員能夠?qū)⒈砀駝澐譃榱_輯部分.例如,可以將所有列標(biāo)題放在thead元素中,這樣就能夠?qū)@個(gè)特殊區(qū)域單獨(dú)應(yīng)用樣式.如果選擇使用thead或tfoot元素,那么必須至少使用一個(gè)tbody元素.在一個(gè)表格中只能使用一個(gè)thead和tfoot元素,但是可以使用多個(gè)tbody元素將復(fù)雜的表格劃分為更容易管理的部分.
3.col 和 colgroup
行與列標(biāo)題應(yīng)該使用th標(biāo)記而不是td,但是如果某些內(nèi)容既是標(biāo)題又是數(shù)據(jù),那么它仍然使用td.表格標(biāo)題可以設(shè)置為row或col的scope屬性,定義它們是行標(biāo)題還是列標(biāo)題.
雖然tr元素使開發(fā)人員能夠整行應(yīng)用樣式,但是很難整列應(yīng)用樣式.為了解決這個(gè)問題,w3c引入了colgroup和col元素.colgroup能夠?qū)κ褂胏ol元素定義的一個(gè)或多個(gè)列進(jìn)行分組.不幸的是,支持col和colgroup元素的樣式的瀏覽器并不多.
以下是html代碼:

復(fù)制代碼

代碼如下:
<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 class="odd">
<td>1</td>
<td>我的未來不是夢(mèng)</td>
<td>張雨生</td>
<td>未知</td>
</tr>
<tr>
<td>2</td>
<td>昨日重現(xiàn)</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
<tr class="odd">
<td>3</td>
<td>我的未來不是夢(mèng)</td>
<td>張雨生</td>
<td>未知</td>
</tr>
<tr>
<td>4</td>
<td>昨日重現(xiàn)</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
<tr class="odd">
<td>5</td>
<td>我的未來不是夢(mèng)</td>
<td>張雨生</td>
<td>未知</td>
</tr>
<tr>
<td>6</td>
<td>昨日重現(xiàn)</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
<tr class="odd">
<td>7</td>
<td>我的未來不是夢(mèng)</td>
<td>張雨生</td>
<td>未知</td>
</tr>
<tr>
<td>8</td>
<td>昨日重現(xiàn)</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
<tr class="odd">
<td>9</td>
<td>我的未來不是夢(mèng)</td>
<td>張雨生</td>
<td>未知</td>
</tr>
<tr>
<td>10</td>
<td>昨日重現(xiàn)</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
</tbody>
</table>

上一篇：css實(shí)現(xiàn)的漂亮的分頁效果代碼(橘黃色與藍(lán)色)

下一篇：基于css3仿造window7的開始菜單

發(fā)表評(píng)論

共有條評(píng)論