现在的位置: 首页 > 综合 > 正文

《HTML5 从入门到精通–7.7 表格的结构》

2013年06月14日 ⁄ 综合 ⁄ 共 1513字 ⁄ 字号 评论关闭

   除了表格的设置标记外,还有一些标记是用来明确表格结构的。通过对结构的设置而分别对表首、表主体以及表尾的样式进行设置。这些都通过成对出现的标记设置,应用到表格里用于整体规划表格的行列属性。使用这些标记能对表格的 一行或多行单元格属性进行统一修改,从而省却了逐一修改单元格属性的麻烦。

 

                                                    7.7.1  表格的表头标记——thead

    表头样式的开始标记<thead>,结束标记</thead>,其中可以设置背景颜色、文字的水平对齐方式、文字的垂直对齐方式等。

语法

<thead bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式">

...

</thead>

语法解释

在该语法中,bgcolor、align和valign参数的取值范围与单元格的设置方法相同,align可以取值left、center或right;valign可以取值top、middle或bottom。在<thead>标记内还可以包含<td>、<th>和<tr>标记,而一个表元素中只能有一个<thead>标记。

例7.20  实例代码

<html>
<head>
<title>设置表头的样式</title>
</head>
<body> 
 <table align="center" border="1" bordercolor="#ffcc99" cellpaddng="3"  width="550"

height="180">
 <caption>某单位物品管理表</caption>
        <thead bgcolor="#ff0000" align="center" valign="middle">
        <tr>
         <th>物品名</th>
         <th>类型</th>
         <th>领取人</th>
         <th>领取人所属部门</th>
         <th>数量</th>
           </tr>
         </thead>
           <tr>
               <td>圆珠笔</td>
               <td>文具</td>
               <td>李小米</td>
               <td>PHP</td>
               <td>1</td>
          </tr>
           <tr>
               <td>鼠标</td>
               <td>电脑配件</td>
               <td>樊晓东</td>
               <td>ASP.NET</td>
               <td>1</td>
          </tr>
           <tr>
               <td>打印纸</td>
               <td>办公耗材</td>
               <td>刘小新</td>
               <td>JAVA</td>
               <td>30</td>
          </tr>
    </table>
</body>
</html>

 

运行这段代码,效果如图7.29所示。

HTML5

                                                                  图7.29  设计表头样式

 

本文由
http://www.91duofanli.com
提供技术支持

 

 

 

抱歉!评论已关闭.