时间:2021-05-08
幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性.
1.summary 和 caption
第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素,但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签,用来描述表格的内容.与image的alt文本属性相似.
2.thead, tbody, tfoot
thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在thead元素中,这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元素,那么必须至少使用一个tbody元素.在一个表格中只能使用一个thead和tfoot元素,但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分.
3.col 和 colgroup
行与列标题应该使用th标记而不是td,但是如果某些内容既是标题又是数据,那么它仍然使用td.表格标题可以设置为row或col的scope属性,定义它们是行标题还是列标题.
虽然tr元素使开发人员能够整行应用样式,但是很难整列应用样式.为了解决这个问题,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规范有两个表格边框模型:单独的和叠加的.在单独模型中,在各个单元格周围有边框,而在叠加模型中单元格共享边框.大多数浏览器默认采用单独模型,因些首先要做的事就是将表格的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中控制单元间距的惟一方法.
<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>不用布局,现回到它原来的功能,--显示数据.
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格,其中最
布局网页常用方法。表格(table)元素最初用来显示和组织数据,由于它具有直观易懂、易操作的特点,后来常用于网页布局。但表格的单元格之间独立性较差,制作网页效率
Css制作table细线表格1、介绍了一个不常用属性:border-collapse:collapse;2、使用了一个属性缩写技巧:border:styleco
有些朋友或许不知道PPT怎样制作好看的堆积条形图的详细操作,那么今天小编就讲解PPT制作好看的堆积条形图的详细方法,有需要的朋友快来看看吧!软件名称:Power
网站的常用术语之一DIV+CSS,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,在使用DIV+CSS时,会有一些经常犯的错误,本文主要