澳门新葡萄京官网首页 1

CSS学习笔记(十)对表单和数据表格使用样式

  • table
    不常用内容-caption
  • table
    不常用内容-th
  • table 不常用内容-thead、tbody、tfoot
  • table
    不常用内容-colgroup、col
  • table
    不常用内容-frame
  • table 不常用内容-rules
  • table
    不常用内容-caption
  • table 不常用内容-th
  • table
    不常用内容-thead、tbody、tfoot
  • 澳门新葡萄京官网首页,table
    不常用内容-colgroup、col
  • table
    不常用内容-frame
  • table 不常用内容-rules
  1. 对数据表格应用样式


普通的用表格展现的数据,一般会形成杂乱的布局,会使用户难以阅读

thead、tbody、tfoot 这三个标签分别表示表头、表体、表脚,前面说了 th
也表示表头,但 th 只是将单元格的文字粗体显示罢了,而 thead 的意义和 th
完全不同。

th 标签用来定义表头。用 th 代替 td,此时该单元格的内容会以粗体显示。

对表格内容用少量垂直和水平填充进行视觉分隔,主要的列标题通过一种精细的重复背景图像区别于数据,颜色交替的行帮助引导用户的实线在每个单元格之间水平移动,同时视觉上不会显得太混乱,为了进一步帮助读者,可以在每一行上应用鼠标停留效果

这三个标签都位于 table 和 tr
之间。最初,人们提出这三个标签希望:在滚动表格时表头、表脚固定,只有表体滚动;同时打印时,每一张纸上都有表头、表脚。但实际上浏览器并不支持这样的特性。但
thead、tbody、tfoot 还是有用的:尤其是在 DOM
应用中,比如我们可以很方便地重复 tbody 的内容,而不受 thead、tfoot
的影响;或者我们也可以通过 CSS 作高级的应用。

<table border=”1″> <tr> <th>姓名</th>
<th>成绩</th> </tr> <tr>
<td>张三</td> <td>90</td> </tr> <tr>
<td>李四</td> <td>91</td> </tr>
</table>

@ 1 表格特有的元素

不论标签出现的顺序如何,在显示时 thead 总是在表格的最上方,tfoot
总是在表格的最下方。如果省略这三个标签,浏览器会默认用 tbody 来解释。

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

  #1 summary和caption

<table border=”1″> <thead> <tr>
<th>姓名</th> <th>成绩</th> </tr>
</thead> <tbody> <tr> <td>张三</td>
<td>90</td> </tr> <tr> <td>李四</td>
<td>91</td> </tr> </tbody> </table>

表头也可以在左边:

    caption:他基本上用做表格的标题

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

<table border=”1″> <tr> <th>姓名</th>
<td>张三</td> </tr> <tr>
<th>联系电话</th> <td>12345678</td> </tr>
</table>

    summary:可应用于表格的标签,用来描述表格的内容(与image的alt文本相似)

 

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

    <table id=”listTable” summary=”音乐排行榜”>
      <caption>实力歌手</caption>
    </table>

  • table
    不常用内容-caption
  • table
    不常用内容-th
  • table 不常用内容-thead、tbody、tfoot
  • table
    不常用内容-colgroup、col
  • table
    不常用内容-frame
  • table 不常用内容-rules

 

  #2 thead、tbody和tfoot


  • table
    不常用内容-caption
  • table 不常用内容-th
  • table
    不常用内容-thead、tbody、tfoot
  • table
    不常用内容-colgroup、col
  • table
    不常用内容-frame
  • table 不常用内容-rules

     thead、tbody和tfoot使开发人员能够将表格划分为逻辑部分,可以将所有列标题放在thead元素中,这样可以对这个特殊区域单独应用样式,如果使用 


    thead或tfoot元素,那么必须至少使用一个tbody元素

    行和列标题应该使用th标记而不是td,但是如果某些内容既是数据又是标题,那么它仍然应该使用td,表格标题可以设置值为row或col的scope属性,定义

    他们是行标题还是列标题,它们还可以设置值rowgroup或colgroup,表示他们与多行或多列相关

    <thead>

      <tr>

        <th id=”playListHead”
scope=”col”>歌曲名</th>

        <th scope=”col”>艺术家</th>

        <th scope=”col”>专辑</th>

        <th scope=”col”>时间</th>

      </tr>

    </thead>

    

  #3 col和colgroup

    colgroup能够对使用col元素定义的一个或多个列进行分组,但是支持col和colgroup元素的浏览器并不多

    <colgroup>

      <col id=”name”/>

      <col id=”art”/>

      <col id=”time”/>

    </colgroup>

@2 数据表格标记

将上述所有HTML元素和属性组合,创建出表格的基本轮廓:

<table id=”listTable” summary=”音乐排行榜”>
<caption>实力歌手</caption>
<colgroup>
 <col id=”name”/>
 <col id=”art”/>
 <col id=”time”/>
</colgroup>
<thead>
 <tr>
  <th id=”playListHead” 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>K歌之王</td>
  <td>陈奕迅</td>
  <td>那些年</td>
 </tr>
 <tr>
  <td>4</td>
  <td>知心</td>
  <td>李行亮</td>
  <td>愿得一人心</td>
 </tr>
</tbody>

</table>

@3 对表格应用样式

CSS规范有两个表格边框模型:单独的和叠加的

border-collapse
属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML
中那样分开显示。

设置表格的宽和边框,通过使用一些垂直和水平填充,在表格单元格周围形成一些空白

table{

  border-collapse:collapse;

  width:50em;

  border:1px solid #666;

}

th,td{

  padding:0.1em 1em;

}

@4 添加视觉样式

 caption{

  font-size:1.2em;

  font-weight:bold;

  margin:1em 0;

}

col{

  border-right:1px solid #ccc;

}

col#albumCol{

  border:none;

}

thead{

  background:#21aec7 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;

}

#palyListHead{

  text-indent:-1000em;

}

.odd{

  background-color:#edf5ff;

}

tr:hover{

  background-color:#3d80df;

  color:#fff;

}

thead tr:hover{

  background-color:transparent;

  color:inherit;

}

效果图:

澳门新葡萄京官网首页 1

2.简单的表单布局

@1有用的表单元素

HTML提供了许多有用的元素,可以帮助在表单中添加结构和意义,其中第一个元素是filedset元素,filedset元素用于对相关的信息块进行分组

filedset{

  border:solid 0 transparent;

}

表单标签:<label>

@2 基本布局

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注