table CSS制做漂亮的网页页面报表

日期:2021-03-13 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

好运的是html标准出示了很多无素和特性来提升数据信息报表针对这些机器设备的可浏览性.
1.summary 和 caption
第1元素是报表的caption,它基础上用做报表的题目.虽然这并不是务必有的元素,可是尽可使用caption一直好的.另外一个元素是summary.summary特性能够运用于报表标识,用来叙述报表的內容.与image的alt文字特性类似.
2.thead, tbody, tfoot
thead, tbody, tfoot使网页页面设计方案人员可以将报表区划为罗辑一部分.比如,能够将全部列题目放在thead元素中,这样就可以够对这个独特地区独立运用款式.假如挑选应用thead或tfoot元素,那末务必最少应用1个tbody元素.在1个报表中只能应用1个thead和tfoot元素,可是可使用好几个tbody元素将繁杂的报表区划为更非常容易管理方法的一部分.
3.col 和 colgroup
行与列题目应当应用th标识而并不是td,可是假如一些內容既是题目又是数据信息,那末它依然应用td.报表题目能够设定为row或col的scope特性,界定它们是行题目還是列题目.
尽管tr元素使开发设计人员可以整行运用款式,可是很难整列运用款式.以便处理这个难题,w3c引进了colgroup和col元素.colgroup可以对应用col元素界定的1个或好几个列开展排序.悲剧的是,适用col和colgroup元素的款式的访问器其实不多.
下列是html编码:

拷贝编码
编码以下:

<table cellspacing="0" id="playlistTable" summary="夕木木歌曲排行榜,每周1次,给你最好是听歌曲享有.">
<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.以便避免报表太宽,必须限定它的宽度;以便协助界定报表地区,加上边框是个好主张.根据运用小量的?直和水平填充,在报表模块格周边产生1些空白,这也是好念头.

拷贝编码
编码以下:

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="夕木木歌曲排行榜,每周1次,给你最好是听歌曲享有.">

详细的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: ⑴000em;
}
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>无需合理布局,现返回它原先的作用,--显示信息数据信息.
上一篇:对于流行访问器的CSS 返回下一篇:没有了