欧美两根一起进3p做受视频,欧美日韩精品久久久免费观看,欧美日韩精品一区二区三区不卡

QQ 咨詢：361652718 513960520

知識學堂

·聯系電話:+86.023-75585550
·聯系傳真:+86.023-75585550
·24小時手機:13896886023
·QQ 咨詢：361652718 513960520

當前位置 > 首頁 > 知識學堂 > 網站建設知識

CSS實例教程:CSS制作好看的網頁表格

更新時間：2011-12-12 | 發(fā)布人：本站 | 點擊率：719 次

如果數據表格對于視力沒有問題用戶都難以閱讀的話,那么想像一個那些用輔助技術(掌上設備)的人來說,它們是多么復雜和混亂.幸運的是html規(guī)范提供了許多無素和屬性來提高數據表格對于這些設備的可訪問性.

1.summary 和 caption

第一元素是表格的caption,它基本上用做表格的標題.盡管這不是必須有的元素,但是盡可以使用caption總是好的.另一個元素是summary.summary屬性可以應用于表格標簽,用來描述表格的內容.與image的alt文本屬性相似.

2.thead, tbody, tfoot

thead, tbody, tfoot使網頁設計人員能夠將表格劃分為羅輯部分.例如,可以將所有列標題放在thead元素中,這樣就能夠對這個特殊區(qū)域單獨應用樣式.如果選擇使用thead或tfoot元素,那么必須至少使用一個tbody元素.在一個表格中只能使用一個thead和tfoot元素,但是可以使用多個tbody元素將復雜的表格劃分為更容易管理的部分.

3.col 和 colgroup

行與列標題應該使用th標記而不是td,但是如果某些內容既是標題又是數據,那么它仍然使用td.表格標題可以設置為row或col的scope屬性,定義它們是行標題還是列標題.

雖然tr元素使開發(fā)人員能夠整行應用樣式,但是很難整列應用樣式.為了解決這個問題,w3c引入了colgroup和col元素.colgroup能夠對使用col元素定義的一個或多個列進行分組.不幸的是,支持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 class="odd">
<td>1</td>
<td>我的未來不是夢</td>
<td>張雨生</td>
<td>未知</td>
</tr>

<tr>
<td>2</td>
<td>昨日重現</td>
<td>卡朋特</td>
<td>未知</td>
</tr>

<tr class="odd">
<td>3</td>
<td>我的未來不是夢</td>
<td>張雨生</td>
<td>未知</td>
</tr>

<tr>
<td>4</td>
<td>昨日重現</td>
<td>卡朋特</td>
<td>未知</td>
</tr>

<tr class="odd">
<td>5</td>
<td>我的未來不是夢</td>
<td>張雨生</td>
<td>未知</td>
</tr>

<tr>
<td>6</td>
<td>昨日重現</td>
<td>卡朋特</td>
<td>未知</td>
</tr>

<tr class="odd">
<td>7</td>
<td>我的未來不是夢</td>
<td>張雨生</td>
<td>未知</td>
</tr>

<tr>
<td>8</td>
<td>昨日重現</td>
<td>卡朋特</td>
<td>未知</td>
</tr>

<tr class="odd">
<td>9</td>
<td>我的未來不是夢</td>
<td>張雨生</td>
<td>未知</td>
</tr>

<tr>
<td>10</td>
<td>昨日重現</td>
<td>卡朋特</td>
<td>未知</td>
</tr>

</tbody>

</table>
=========================

下面我們來添加css:

css規(guī)范有兩個表格邊框模型:單獨的和疊加的.在單獨模型中,在各個單元格周圍有邊框,而在疊加模型中單元格共享邊框.大多數瀏覽器默認采用單獨模型,因些首先要做的事就是將表格的border-collapse屬性設置為collapse.為了防止表格太寬,需要限制它的寬度;為了幫助定義表格區(qū)域,添加邊框是個好主意.通過應用少量的?直和水平填充,在表格單元格周圍形成一些空白,這也是好想法.

---------------------------------
table {
border-collapse: collapse;
width: 50em;
border: 1px solid #666;
}

th, td {
padding: 0.1em 1em;
}
----------------------------------

css的border-spacing屬性可以控制單元格之間的距離.不幸的是,windows上的IE6和更低版本不理解這個屬性(別懷疑這件事,因為大多數人不懂得升級)因此很少使用它.為了去掉單元格之間的默認填充,不得不使用老式但可靠的cellspacing屬性.嚴格地說,這個屬性在本質上是表現性的.但是,它仍然是有效的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;
}

==============================

剛學css的時候認為<table>標簽沒有用,其實那時候的想法是錯的,<table>不用布局,現回到它原來的功能,--顯示數據.

分享到：