来谈谈：CSS实例教程:CSS制造悦目的网页表格
对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。破洛洛文章简介：假如数据表格关于目力没有成绩用户都难以浏览的话,那末想像一个那些用帮助手艺(掌上设备)的人来讲,它们是何等庞大和凌乱.侥幸的是html标准供应了很多无素和属性来进步数据表格关于这些设备的可会见性.
假如数据表格关于目力没有成绩用户都难以浏览的话,那末想像一个那些用帮助手艺(掌上设备)的人来讲,它们是何等庞大和凌乱.侥幸的是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代码:
=============================
<tablecellspacing="0"id="playlistTable"summary="夕木木音乐排行榜,每周一次,给你最难听音乐享用.">
<caption>
夕木木音乐排行榜
</caption>
<colgroup>
<colid="PlaylistCol"/>
<colid="trackCol"/>
<colid="artistCol"/>
<colid="albumCol"/>
</colgroup>
<thead>
<tr>
<thid="playlistPosHead"scope="col">夕木木音乐排行榜</th>
<thscope="col">歌曲</th>
<thscope="col">歌手</th>
<thscope="col">专辑</th>
</tr>
</thead>
<tbody>
<trclass="odd">
<td>1</td>
<td>我的将来不是梦</td>
<td>张雨生</td>
<td>未知</td>
</tr>
<tr>
<td>2</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
<trclass="odd">
<td>3</td>
<td>我的将来不是梦</td>
<td>张雨生</td>
<td>未知</td>
</tr>
<tr>
<td>4</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
<trclass="odd">
<td>5</td>
<td>我的将来不是梦</td>
<td>张雨生</td>
<td>未知</td>
</tr>
<tr>
<td>6</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
<trclass="odd">
<td>7</td>
<td>我的将来不是梦</td>
<td>张雨生</td>
<td>未知</td>
</tr>
<tr>
<td>8</td>
<td>昨日重现</td>
<td>卡朋特</td>
<td>未知</td>
</tr>
<trclass="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:1pxsolid#666;
}
th,td{
padding:0.1em1em;
}
----------------------------------
css的border-spacing属性能够把持单位格之间的间隔.不幸的是,windows上的IE6和更低版本不睬解这个属性(别嫌疑这件事,由于年夜多半人不明白晋级)因而很少利用它.为了往失落单位格之间的默许添补,不能不利用老式但牢靠的cellspacing属性.严厉地说,这个属性在实质上是体现性的.可是,它仍旧是无效的html,并且是以后在IE6中把持单位间距的唯一办法.
--------------------------------------
<tablecellspacing="0"id="playlistTable"summary="夕木木音乐排行榜,每周一次,给你最难听音乐享用.">
---------------------------------------
完全的css代码:
==============================
table{
border-collapse:collapse;
width:50em;
border:1pxsolid#666;
}
caption{
font-size:1.2em;
font-weight:bold;
margin:1em0;
}
col{
border-right:1pxsolid#ccc;
}
col#albumCol{
border:none;
}
thead{
background:#cccurl(images/bar.gif)repeat-xleftcenter;
border-top:1pxsolid#a5a5a5;
border-bottom:1pxsolid#a5a5a5;
}
th{
font-weight:normal;
text-align:left;
}
#playlistPosHead{
text-indent:-1000em;
}
th,td{
padding:0.1em0.5em;
}
.odd{
background-color:#edf5ff;
}
tr:hover{
background-color:#3d80df;
color:#fff;
}
theadtr:hover{
background-color:transparent;
color:inherit;
}
==============================
刚学css的时分以为<table>标签没有效,实在当时候的设法是错的,<table>不必结构,现回到它本来的功效,--显现数据.
</p>
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。 AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
页:
[1]