tableCSS制作好看的网页表格_htmltable制作简历资源-CSDN文库

170 浏览量 2020-12-12 16:24:36 上传评论收藏 65KB PDF 举报

资源推荐

资源详情

资源评论

table 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元素将复杂的表格划分为更容易管理的部分.

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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38700430

粉丝: 3
资源: 915

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip