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. Js表单验证控件

    演示地址:http://weishakeji.net/Utility/Verify/Index.htm    开源地址:https://github.com/weishakeji/Verify_Js ...

  2. android MeasureSpec的三个测量模式

    1.MeasureSpec含义 其实可以去看MeasureSpec的文档,里面对MeasureSpec的作用介绍得很清楚.MeasureSpec封装了父布局传递给子布局的布局要求,每个MeasureS ...

  3. Servlet、ServletConfig、ServletContext深入学习

    1.Servlet学习 1.Servlet生命周期 Servlet 加载—>实例化—>服务—>销毁. init(servletConfig):(经过自己的测试发现会先调用这个而不是i ...

  4. mydumper安装及使用

    mydumper 官网:https://launchpad.net/mydumper 安装方式: 1.yum install glib2-devel mysql-devel zlib-devel pc ...

  5. springcloud注解@EnableDiscoveryClient与@EnableEurekaC

    spring cloud中discovery service有许多种实现(eureka.consul.zookeeper等等),@EnableDiscoveryClient基于spring-cloud ...

  6. java多线程计算和

    如题:如何利用多线程实现1~1000000000的和 本文利用Callable可以返回值的特性,并将执行结果用CompletionService进行存储,最后将分步值累加. import java.u ...

  7. vysor原理以及Android同屏方案

    vysor是一个免root实现电脑控制手机的chrome插件,目前也有几款类似的通过电脑控制手机的软件,不过都需要root权限,并且流畅度并不高.vysor没有多余的功能,流畅度也很高,刚接触到这款插 ...

  8. Codeforces 463D Gargari and Permutations(求k个序列的LCS)

    题目链接:http://codeforces.com/problemset/problem/463/D 题目大意:给你k个序列(2=<k<=5),每个序列的长度为n(1<=n< ...

  9. C++学习笔记（原创）

    以下内容为自己一年多的C++学习心得,纯原创,转载请注明源地址. 一年多的C++学习过程中,自己阅读了很多C++经典著作,有<effective c++>,<more effecti ...

  10. 基于用Path.Combine的优化

    Path.Combine: 什么时候会用到Path.Combine呢?,当然是连接路径字符串的时候! 所以下面的代码可以完美的工作: public static void Main() { strin ...