《
用css制作具有親和力的表格》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344232013.htm
veerle.duoh,用CSS制作一個(gè)圓形放大鏡.com/comments.php?id=108_0_2_20_C8
數(shù)據(jù)構(gòu)造為
能看到我用了scope 屬性來(lái)確保這個(gè)表格在疏忽覺(jué)效果的閱讀器下展現(xiàn)出更好的效果，這個(gè)屬性定義標(biāo)題元素包括的標(biāo)題內(nèi)容是否為 行 (scope="col") 或 列(scope="row") 。下面是CSS的內(nèi)容對(duì)上面的標(biāo)題，應(yīng)用和背景來(lái)更好的辨別出他們
<table id="mytable" cellspacing="0" summary="The technical
specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8GHz">Dual 1.8GHz<,
用CSS創(chuàng)建一個(gè)布局居中的頁(yè)面;/th>
,
用cssText屬性批量操作樣式技巧; <th scope="col" abbr="Dual 2GHz">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5GHz">Dual 2GHz</th>
</tr>
<tr>
<th scope="row" class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>,
用CSS3實(shí)現(xiàn)根據(jù)文件類型顯示不同圖標(biāo);M9457LL/A</td>
</tr>
...
--> [
網(wǎng)站建設(shè)之]用css制作存在親和力的表格
www.snook.ca/technical/colour_contrast/colour.html
這里的數(shù)據(jù)來(lái)自于MAC的technical specifications of each Power Mac G5|
Tag：CSS 表格 CSS 表格
在前一段時(shí)光制作了CSS calendar，而后我就想用css制作一個(gè)table的模型，該模型遵守親和力規(guī)矩，而且有良好的視覺(jué)效果
這樣做的利益是： 應(yīng)用表格來(lái)裝載數(shù)據(jù)，不問(wèn)可知是最佳的，你能無(wú)比機(jī)動(dòng)的為每個(gè)單元格定義樣式。下面是詳細(xì)的做法
下面定義左側(cè)的標(biāo)題款式
圖：顏色的抉擇跟搭配
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #B4AA9D;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #6D929B;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7,
用CSS3偽類target如何制作tab選項(xiàng)卡效果;
background: none;
}
至此，全部制造進(jìn)程停止了
首先在photoshop設(shè)計(jì)一個(gè)效果出來(lái)，通過(guò)對(duì)各種顏色，小圖標(biāo)等的常識(shí)，做出了一個(gè)后果令人滿足的效果圖來(lái)。下一步呢，裁處下面三個(gè)圖片來(lái)作為題目的背景圖片，假如你對(duì)色彩的掌握不是十分好的話，這里給你供給一些調(diào)色工具
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #6D929B;
}
td.alt {
background: #F5FAFA;
color: #B4AA9D;
}
(責(zé)任編輯：網(wǎng)站建設(shè))
用css制作具有親和力的表格相關(guān)文章