1.<table>标签的结构

示例代码：

 <table border="1">

     	<caption>信息统计表</caption>

     		<thead>

     		<tr >

     		<th>#</th>

     		</tr>

     	</thead>

     	<tbody>

     		<tr>

     		<td>1</td>

     		</tr>

     		<tr>

     		<td>2</td>

     		</tr>

     		<tr>

     		<td>3</td>

     		</tr>

     		<tr>

     		<td>4</td>

     		</tr>

     	</tbody>

</table>

一个完整的例子：

 <table border="1">

      <caption class="text-center">信息统计表</caption>

      <thead>

     	        <tr >

     		        <th>#</th>

     		        <th>Firstname</th>

     		        <th>Lastname</th>

     		        <th>Phone</th>

     		        <th>QQ</th>

     	        </tr>

      </thead>

      <tbody>

     	      <tr class="error">

     		      <td>1</td>

     		      <td>qian</td>

     		      <td>shou</td>

     		      <td>11111111111</td>

     		      <td>111111111</td>

     	      </tr>

     	      <tr class="warning">

     		      <td>2</td>

     		      <td>qian</td>

     		      <td>shou</td>

     		      <td>11111111111</td>

     		      <td>111111111</td>

     	      </tr> 

     	      <tr class="info"> <td>3</td>

     		      <td>qian</td>

     		      <td>shou</td>

     		      <td>11111111111</td>

     		      <td>111111111</td>

     	      </tr> 

     	      <tr class="success">

     	           	  <td>4</td>

     		      <td>qian</td>

     		      <td>shou</td>

     		      <td>11111111111</td>

     		      <td>111111111</td>

     	      </tr> 

      </tbody>

</table>

2.合并上下的单元格（rowspan）

示例代码：

<table border="1">

     	<caption class="text-center">信息统计表</caption>

     		<thead>

     			<tr >

     			<th>#</th>

     			<th>Firstname</th>

     			<th>Lastname</th>

     			<th>Phone</th>

     			<th>QQ</th>

     			</tr>

     		</thead>

     	<tbody>

     		<tr class="error">

     		<td rowspan="2">1</td>

     		<td>qian</td>

     		<td>shou</td>

     		<td>11111111111</td>

     		<td>111111111</td>

     		</tr> <tr class="warning">

     		<td>qian</td>

     		<td>shou</td>

     		<td>11111111111</td>

     		<td>111111111</td>

     		</tr> <tr class="info"> <td>3</td>

     		<td>qian</td>

     		<td>shou</td>

     		<td>11111111111</td>

     		<td>111111111</td>

     		</tr> <tr class="success"> <td>4</td>

     		<td>qian</td>

     		<td>shou</td>

     		<td>11111111111</td>

     		<td>111111111</td>

     		</tr> 

     	</tbody>

</table>

3.合并左右的单元格（colspan）

示例代码：

<table class="table table-condensed table-bordered">

  <caption class="text-center">信息统计表</caption>

    <thead>

      <tr >

      <th>#</th>

      <th>Firstname</th>

      <th>Lastname</th>

      <th>Phone</th>

      <th>QQ</th>

      </tr>

    </thead>

  <tbody>

    <tr class="error">

    <td>1</td>

    <td colspan="4"><p class="text-center">这是合并了四个单元格</p></td>

    </tr>

    <tr class="warning">

    <td>2</td>

    <td>qian</td>

    <td>shou</td>

    <td>11111111111</td>

    <td>111111111</td>

    </tr>

    <tr class="info">

    <td>3</td>

    <td>qian</td>

    <td>shou</td>

    <td>11111111111</td>

    <td>111111111</td>

    </tr>

    <tr class="success">

    <td>4</td>

    <td>qian</td>

    <td>shou</td>

    <td>11111111111</td>

    <td>111111111</td>

    </tr>

  </tbody>

</table>

<table>标签的结构和合并单元格的方法的更多相关文章

  1. element-ui 合并单元格的方法

    arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 只合并区域位置          //columnIndex 横的第一列    ...

  2. html table动态合并单元格 js方法

    <script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...

  3. 【Javascript】Javascript横向/纵向合并单元格TD

    > 需求是这样滴(>_<) 在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1     JOB TO ...

  4. Java导出Excel表，POI 实现合并单元格以及列自适应宽度（转载）

    POI是apache提供的一个读写Excel文档的开源组件,在操作excel时常要合并单元格,合并单元格的方法是: sheet.addMergedRegion(new CellRangeAddress ...

  5. POI 实现合并单元格以及列自适应宽度

    POI是apache提供的一个读写Excel文档的开源组件,在操作excel时常要合并单元格,合并单元格的方法是: sheet.addMergedRegion(new CellRangeAddress ...

  6. python 利用三方的xlrd模块读取excel文件，处理合并单元格

      目的: python能使用xlrd模块实现对Excel数据的读取,且按照想要的输出形式.  总体思路: (1)要想实现对Excel数据的读取,需要用到第三方应用,直接应用. (2)实际操作时候和我 ...

  7. table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  8. BootStrap Table 合并单元格

    为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...

  9. css table 合并单元格

    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...

随机推荐

  1. 第9月第3天 uilabel contentscale

    1. http://blog.csdn.net/u012703795/article/details/43706449

  2. asp.net mvc 根据路由生成正确的url

    假设存在这样一段路由配置: routes.MapRoute( name: "ProductList1_01", url: "pl/{bigSortId}_{smallSo ...

  3. 工作目录与os.getcwd()

    假设某程序在/root/a/aa.py,在shell,当前pwd为/root,输入./a/aa.py运行py程序,则爱程序的工作目录是/root.而不是程序所在文件夹,os.getcwd()就是查看工 ...

  4. E - 食物链

    题目链接:https://cn.vjudge.net/contest/66964#problem/E 关系式: ra->rb=(ra->b + b->rb )%3; ra->b ...

  5. linux下简单的备份的脚本 2 【转】

    转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=26807463&id=4577034 之前写过linux下简单的 ...

  6. 特性（C# 和 Visual Basic）

    特性提供功能强大的方法,用以将元数据或声明信息与代码(程序集.类型.方法.属性等)相关联. 特性与程序实体关联后,即可在运行时使用名为“反射”的技术查询特性. 有关更多信息,请参见 反射(C# 和 V ...

  7. 【linux】环境变量

    参考链接: http://www.cnblogs.com/growup/archive/2011/07/02/2096142.html https://zhidao.baidu.com/questio ...

  8. java 异常历史 和观点

    异常起源于PL/1和Mesa之类的系统中. 1.) 不在于编译器是否会强制程序员去处理错误,而是要由一致的,使用异常来报告错误 2.) 不在于什么时候进行检查,而是一定要有检查.

  9. java多线程整理

    参考博客: http://blog.csdn.net/javazejian/article/details/50878598

  10. vue-router填坑之路

    1.在结构化css时,习惯将不同的css文件通过一个入口文件打包,而入口文件在引入其他css文件时,需要强烈注意,要在单行末尾加分号: 少分号的,单行相对应的css文件会引用无效 @import '. ...