HTML之表格篇——表格的嵌套

表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。

下面将从最简单的表格嵌套开始演示和讲解，不会太难的。

两张表格的嵌套：

Table No.1(Father Table)

Table No.2(Son Table)

Table No.1(Father Table)

代码如下（红色的为第二张表格的代码）：

<table border=8 bordercolor=#0099cc width=100%>
<tbody>
<tr>
<td>Table No.1(Father Table)
<table border=8 bordercolor=#ccffcc width=100%>
     <tbody>
      <tr>
       <td><br>Table No.2(Son Table)<br></td>
      </tr>
     </tbody>
    </table>
Table No.1(Father Table)
</td>
</tr>
</tbody>
</table>

从上面的代码中，我们看得出来，第二张表格代码包含在第一张表格代码中的<td>和</td>里面，这一点一定要弄清楚。不然，终止符不正确或缺少时，由于系统的容错性不好、自动修正功能不够智能化等问题，效果将会很糟糕，错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器当机。

下面是三个表格的嵌套代码及效果，由于表格里没有内容，所以，黑马指定了三级表格的高度。代码中，每一个表格的代码用一种颜色来区分。

代码：

<TABLE borderColor=#6633ff width="100%" border=8>
<TBODY>
  <TR>
   <TD>
    <TABLE borderColor=#cc9966 width="100%" border=8>
     <TBODY>
      <TR>
       <TD>
        <TABLE borderColor=#003300 height=200 width="100%" border=8>
         <TBODY>
          <TR>
           <TD></TD>
          </TR>
         </TBODY>
        </TABLE>
       </TD>
      </TR>
     </TBODY>
    </table>
   </td>
  </tr>
</tbody>
</Table>
HTML之表格篇——表格的嵌套（二）

先来看看以下表格：

你应该可以看得出来，上表中有一个一级表格（父表格），里面有两个二级表格（子表格），二级表格一上一下，位置十分清楚。如果你愿意，你还可以在二级表格里再嵌套次级别的表格。

现在我们来看代码，每一种颜色的文字代码一个表格的完整代码，注意观察起始标识符号的前后关系。

<table border=6 bordercolor=#888888 width="100%">
  <tbody><tr><td>
    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td></td></tr></tbody>
    </table>
    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td></td></tr></tbody>
    </table>
  </td></tr></tbody>
</table>
HTML之表格篇——表格的嵌套（三）

与上一讲的嵌套效果相比，我们可以明显地看到：上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢？

首先，在父表格里，我们用两次“<td>……</td>”将父表分隔成左右各一半，即父表是一个有一行两列的表格。其次，我们在父表的左、右单元格里分别放置一个表格，就形成了以上效果。请研究以下代码清单，为了区分层次，黑马把每一个表格的代码用一种颜色表示，请特别注意父表的代码：

HTML之表格篇——表格的嵌套相关推荐

Bootstrap笔记(十一) 表格篇
表格篇表格样式与效果表格内容的垂直对齐方式特定意义色彩类别响应式表格参考资料表格样式与效果 Bootstrap提供以下类别用来设定表格样式与效果: 範例1: 表格与标题使用 .tab ...
3、Latex学习笔记之表格篇
目录表格 1.基本结构 1.1框架 1.2行高 1.3标题 1.4标签 1.5居中 1.6表格 2.引用表格 3.常见表格类型 3.1三线表 3.2 斜线表头 3.3合并单元格 4.在线表格生成工具 ...
从零开始的 React 组件开发之路 (一)：表格篇
React 下的表格狂想曲 0. 前言欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇,表格篇.本系列的特色是从需求分析.API 设计和代码设计三个递进的过程中,由简到繁地开发一个 ...
layui使用表格数据，json嵌套数据解决
layui使用表格数据,json嵌套数据解决 layui使用数据表格 json数据输出出现的问题 layui,返回的数据不符合规范,正确的成功状态码 (code) 应为:0 在数据嵌套时的使用 la ...
phpWord使用模板填充数据:包含表格及嵌套表格(多个表格/循环表格)
参考文档模板处理基础使用安装过程省略,首先加载模板: $templateProcessor = new TemplateProcessor(ROOT_PATH . 'uploads/templa ...
LigerUI 使用教程表格篇
阅读目录第一个例子数据结构两种绑定数据的方式配置column 自定义表头自定义单元格排序与分页事件与方法第一个例子简介 ligerGrid是ligerui系列插件的核心控件,用户可以 ...
winform在表格中输入一个完整的时间字段_B端交互组件之表格篇
引言 B端项目或产品中,表格应该是被利用的最多的了,很多主体界面基本都会用到表格组件.我们常说一个基本的功能是包含增删改查的,为了完整的表达这一功能,常见的就是用表格组件.B端产品中数据是关键,而表格 ...
jQuery LigerUI 使用教程表格篇(1)
阅读目录第一个例子数据结构两种绑定数据的方式配置column 自定义表头自定义单元格排序与分页事件与方法第一个例子简介 ligerGrid是ligerui系列插件的核心控件,用户可以 ...
layui应用之表格篇
前言:个人转码小说网站:友书-绿色.纯净.无广告,欢迎广大小说阅读爱好者同行来本网站看小说,书友交流群:580462139(群主及管理均为资深90后程序猿哦) 正文:先来张效果图镇楼如图,利用lay ...

HTML之表格篇——表格的嵌套

HTML之表格篇——表格的嵌套相关推荐

最新文章

热门文章