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. 第7月第26天 iOS httpserver

    1. cocoahttpserver 1)httpserver [httpServer start:&error] 2)HTTPConnection [newConnection start] ...

  2. Python2的object和type

    前言: Python在2.2和3.0之间,把继承了object的类叫做新式类,如果我们定义了一个类,他没有继承object,则不是新式类,则没有__class__,__bases__等属性,而用typ ...

  3. mybatis关联查询数据模型分析——（七）

    1.     数据模型分析思路 1.每张表记录的数据内容 分模块对每张表记录的内容进行熟悉,相当 于你学习系统 需求(功能)的过程. 2.每张表重要的字段设置 非空字段.外键字段 3.数据库级别表与表 ...

  4. 使用badblocks命令检测、修复硬盘坏道(待验证)

    今天我的新硬盘到了.暂时没想好怎么用它.可以把它装入光驱位硬盘架给G430用,也可以把它当成移动硬盘来用. 想起以前记录过一个badblocks的用法,用来检查坏道,这里再贴一遍备用. ####### ...

  5. Oracle ORA-12541：TNS：无监听程序

    Oracle ORA-12541:TNS:无监听程序 标签: Oracle DataBase 今天使用Oracle数据库,使用可视化连接工具连接测试环境的数据库时提示无监听程序,最后在老师帮助下终于搞 ...

  6. ldconfig命令与ldd命令

    ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令 ldconfig通常在系统启动时运行,而当用户安装了一个新的动态链接库时,就需要手工运行这个命令. ...

  7. CSS3实现各种表情

    CSS3实现各种表情 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></title ...

  8. java 多重继承

    接口不仅仅只是一种更纯粹形式的抽象类,它的目标比这更高,因为接口是根本没有任何具体实现的--也就是说,没有任何与接口相关的存储,因此也就无法阻止多个接口的组合, 在导出类中,不强制要求必须有一个抽象的 ...

  9. 带你走进Android Afinal框架的世界

    1.什么是Afinal框架? Afinal是一个开源的android的orm和ioc应用开发框架,其特点是小巧灵活,代码入侵量少.在android应用开发中,通过Afinal的ioc框架,诸如ui绑定 ...

  10. matlab进阶

    常用功能的实现 获取当前脚本所在目录 current_script_dir = fileparts(mfilename('fullpath')); % 结尾不带'/' 常用函数的说明 bsxfun m ...