拆分合并单元格–与–表格的结构化、直列化、标题

悲酥清风
悲酥清风
悲酥清风
826
文章
55
评论
Dreamweaver1 5,130,562阅读模式

本节为表格的最后一节，主要包含两点：

1、拆分与合并单元格

2、表格的结构化、直列化、标题。

拆分与合并单元格

属性名称           属性值                    说明

colspan             数字                向两边扩展栏位

rowspan            数字                向下扩展栏位

 colspan向两边扩展栏位。注：作用在td里面，看下例：

  1. <table border="1" width="300" height="200"><!--border是表格的属性-->
  3.             <tr><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th></tr><!--<tr>代表一行  <th>代表标题 -->
  5.             <tr><td>阿牛</td><td>男</td><td>23</td><td>运营经理</td></tr>
  7.             <tr><td colspan="2">张三</td><td>男</td><td>20</td><td>技术主管</td></tr>
  9.             <tr><td>小李</td><td>女</td><td>25</td><td>美工设计</td></tr>
  11.     </table>

如图：拆分合并单元格–与–表格的结构化、直列化、标题

我们会发现，张三的姓名格占了姓名和性别两格，而后面的职业格后移一位，导致整个表格错乱，以致出现错误，那么怎么实现张三的姓名格和性别格的合并呢？

第一步：先删掉不要的空格，也就是要合并的一个空格。

  1. <tr><td>张三</td><td>男</td><td>20</td><td>技术主管</td></tr>
  5.     <tr><td>张三</td><td>20</td><td>技术主管</td></tr>

刷新浏览器看一下结果：拆分合并单元格–与–表格的结构化、直列化、标题

发现张三这一行表格少了一格。拆分合并单元格–与–表格的结构化、直列化、标题

如果要合并一行的两列表格，那么就在张三这个td标签中输入colspan="2"，如下：

  1. <tr><td colspan="2">张三</td><td>20</td><td>技术主管</td></tr>

刷新浏览器如下：拆分合并单元格–与–表格的结构化、直列化、标题

 

我们发现张三的姓名列和性别列合并了。另外还可以在给合并过的单元格来个属性居中。

<tr><td colspan="2">张三</td><td>20</td><td>技术主管</td></tr>，“张三”二字就会在单元格内居中。拆分合并单元格–与–表格的结构化、直列化、标题

rowspan  向下扩展栏位

如果张三和小李都是技术主管，那么在职业栏的表格中就没必要写两个技术主管，那么这时rowspan就起到作用了。拆分合并单元格–与–表格的结构化、直列化、标题

  1. <table border="1" width="300" height="200"><!--border是表格的属性-->
  3.                <tr><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th></tr><!--<tr>代表一行  <th>代表标题 -->
  5.                <tr><td>阿牛</td><td>男</td><td>23</td><td>运营经理</td></tr>
  7.                <tr><td>张三</td><td>男</td><td>20</td><td rowspan="2">技术主管</td></tr>
  9.                <tr><td>小李</td><td>女</td><td>25</td></tr>
  11.        </table>

同理，上下合并只需删除上下对应的其中一个，然后在相应的td标签中加入rowspan=”2”即可。
拆分合并单元格–与–表格的结构化、直列化、标题

 

表格的结构化、直列化、标题

(1).结构化格式：

  1. <table>
  3.     <thead>……</thead> --------表头区
  5.     <tbody>……</tbody> --------表体区
  7.     ………………………
  9.     <tfoot>……</tfoot> --------表尾区
  11.     </table>

正常表格中th标签作为表格的标题标签是加粗的拆分合并单元格–与–表格的结构化、直列化、标题

 

如果把th标签书序放在中间

  1. <table border="1" width="300" height="200">
  3.     <tr><td>阿牛</td><td>男</td><td>23</td><td>运营经理</td></tr>
  5.     <tr><td>张三</td><td>男</td><td>20</td><td>技术主管</td></tr>
  7.     <tr><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th></tr>
  9.     <tr><td>小李</td><td>女</td><td>25</td><td>美工技术</td></tr>
  11. </table>

拆分合并单元格–与–表格的结构化、直列化、标题

如果我们给th表格加上表头

  1. <table border="1" width="300" height="200">
  3.     <tr><td>阿牛</td><td>男</td><td>23</td><td>运营经理</td></tr>
  5.     <tr><td>张三</td><td>男</td><td>20</td><td>技术主管</td></tr>
  7.     <thead>
  9.     <tr><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th></tr>
  11.     </thead>
  13.     <tr><td>小李</td><td>女</td><td>25</td><td>美工技术</td></tr>
  15. </table>

拆分合并单元格–与–表格的结构化、直列化、标题

 

如图我们会发现表格头部会被自动上浮，排在首行。

  1. <table border="1" width="300" height="200"><!--border是表格的属性--><!--<tr>代表一行  <th>代表标题 -->
  3.     <thead>
  5.        <tr><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th></tr>
  7.     </thead>
  9.     <tfoot>
  11.        <tr><td colspan="4">信息总汇</td></tr>
  13.     </tfoot>
  15.     <tbody>
  17.        <tr><td>阿牛</td><td>男</td><td>23</td><td>运营经理</td></tr>
  19.        <tr><td>张三</td><td>男</td><td>20</td><td>技术主管</td></tr>
  21.     </tbody>
  23.    </table>

不管thead、tbody、tfoot怎样颠倒位置，最终在浏览器的展现顺序都是thead在上，tbody在中间，tfoot在下面。

拆分合并单元格–与–表格的结构化、直列化、标题

(2).直列化格式：<colgroup>….</colgroup>拆分合并单元格–与–表格的结构化、直列化、标题

个别直列设置

格式:<col>功能完全和<colgroup>一样.

重点讲span，其他的大家线下多试试。

  1. <table border="1" width="300" height="200">
  3.             <colgroup span="1" bgcolor="red"></colgroup>
  5.             <tr><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th></tr>
  7.             <tr><td>阿牛</td><td>男</td><td>23</td><td>运营经理</td></tr>
  9.             <tr><td>张三</td><td>男</td><td>20</td><td>技术主管</td></tr>
  11.             <tr><td>小李</td><td>女</td><td>25</td><td>美工技术</td></tr>
  13.      </table>

拆分合并单元格–与–表格的结构化、直列化、标题

span的属性值，是指对从左边起第一列的多少列进行背景颜色或背景图片的定义。

注：在火狐下无效，在谷歌和ie下有效。

那么怎么实现针对特定一列进行定义呢？

个别直列设置 格式:<col>功能完全和<colgroup>一样.

  1. <table border="1" width="300" height="200">
  3.             <col bgcolor="yellow"></col>
  5.             <col bgcolor="green"></col>
  7.             <col bgcolor="red"></col>
  9.             <tr><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th></tr>
  11.             <tr><td>阿牛</td><td>男</td><td>23</td><td>运营经理</td></tr>
  13.             <tr><td>张三</td><td>男</td><td>20</td><td>技术主管</td></tr>
  15.             <tr><td>小李</td><td>女</td><td>25</td><td>美工技术</td></tr>
  17.    </table>

我们在测试中不难发现，<col>出现的次数决定着定义的列数。

拆分合并单元格–与–表格的结构化、直列化、标题

(3).表格的标题：

  1. <table>
  3.    <caption>….</caption>
  5.    </table>

<caption>下的属性值有:

属性名称        属性值          说明

align                 top             标题在表格上方

bottom          标题在表格下方

caption主要应用在表的头和尾，系统默认是top属性

  1. <table border="1" width="300" height="200">
  3.             <caption>人员信息表</caption>
  5.             <col bgcolor="yellow"></col>
  7.             <col bgcolor="green"></col>
  9.             <col bgcolor="red"></col>
  11.             <tr><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th></tr>
  13.             <tr><td>阿牛</td><td>男</td><td>23</td><td>运营经理</td></tr>
  15.             <tr><td>张三</td><td>男</td><td>20</td><td>技术主管</td></tr>
  17.             <tr><td>小李</td><td>女</td><td>25</td><td>美工技术</td></tr>
  19.     </table>

拆分合并单元格–与–表格的结构化、直列化、标题

即<caption>人员信息表</caption>=<caption align="top">人员信息表</caption>

</caption>=<caption align="bottom">人员信息表</caption>拆分合并单元格–与–表格的结构化、直列化、标题

悲酥清风
  • 本文由 发表于 2015年4月22日 23:08:27
评论  1  访客  0  引用  1

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定