html好看的数据表格,CSS制作好看的⽹页表格
如果数据表格对于视⼒没有问题⽤户都难以阅读的话，那么想像⼀个那些⽤辅助技术(掌上设备)的⼈来说，它们是多么复杂和混乱.幸运的是html规范提供了许多⽆素和属性来提⾼数据表格对于这些设备的可访问性.
1.summary 和 caption
第⼀元素是表格的caption，它基本上⽤做表格的标题.尽管这不是必须有的元素，但是尽可以使⽤caption总是好的.另⼀个元素是
summary.summary属性可以应⽤于表格标签,⽤来描述表格的内容.与image的alt⽂本属性相似.
2.thead, tbody, tfoot
thead, tbody, tfoot使⽹页设计⼈员能够将表格划分为罗辑部分.例如，可以将所有列标题放在thead元素中，这样就能够对这个特殊区域单独应⽤样式.如果选择使⽤thead或tfoot元素，那么必须⾄少使⽤⼀个tbody元素.在⼀个表格中只能使⽤⼀个thead和tfoot元素，但是可以使⽤多个tbody元素将复杂的表格划分为更容易管理的部分.
⾏与列标题应该使⽤th标记⽽不是td，但是如果某些内容既是标题⼜是数据，那么它仍然使⽤td.表格标题可以设置为row或col的scope属性，定义它们是⾏标题还是列标题.
虽然tr元素使开发⼈员能够整⾏应⽤样式，但是很难整列应⽤样式.为了解决这个问题,w3c引⼊了colgroup和col元素.colgroup能够对使⽤col元素定义的⼀个或多个列进⾏分组.不幸的是,⽀持col和colgroup元素的样式的浏览器并不多.
以下是html代码:
=============================
⼣⽊⽊⾳乐排⾏榜
⼣⽊⽊⾳乐排⾏榜歌曲歌⼿专辑
1我的未来不是梦张⾬⽣未知2昨⽇重现卡朋特未知3我的未来不是梦张⾬⽣未知4昨⽇重现卡朋特未知5我的未来不是梦张⾬⽣未知6昨⽇重现卡朋特未知7我的未来不是梦张⾬⽣未知8昨⽇重现卡朋特未知9我的未来不是梦张⾬⽣未知10昨⽇重现卡朋特未知
=========================
下⾯我们来添加css:
css规范有两个表格边框模型：单独的和叠加的.在单独模型中，在各个单元格周围有边框,⽽在叠加模型中单元格共享边框.⼤多数浏览器默认采⽤单独模型，因些⾸先要做的事就是将表格的border-collapse属性设置为collapse.为了防⽌表格太宽，需要限制它的宽度；为了帮助定义表格区域，添加边框是个好主意.通过应⽤少量的?直和⽔平填充，在表格单元格周围形成⼀些空⽩，这也是好想法.
---------------------------------
table {
border-collapse: collapse;
width: 50em;
border: 1px solid #666;
}
th, td {
padding: 0.1em 1em;
}
----------------------------------
css的border-spacing属性可以控制单元格之间的距离.不幸的是,windows上的IE6和更低版本不理解这个属性(别怀疑这件事，因为⼤多数⼈不懂得升级)因此很少使⽤它.为了去掉单元格之间的默认填充，不得不使⽤⽼式但可靠的cellspacing属性.严格地说，这个属性在本质上是表现性的.但是，它仍然是有效的html,⽽且是当前在IE6中控制单元间距的惟⼀⽅法.
--------------------------------------
---------------------------------------
完整的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;
好看的css代码
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的时候认为
本博客所有⽂章如⽆特别注明均为原创。以超链接形式注明转⾃ 成功志 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。