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. 产品排序(2015 年北大自招夏令营) （与栈相关的区间DP）

    题面: \(solution:\) 又是一道\(DP\)的好题啊!状态并不明显,需要仔细分析,而且还结合了栈的特性! 做这一类题,只要出题人有点理想,一定会在栈的性质上做点文章,所以我们尽量围绕栈的性 ...

  2. Mini Twitter

    Implement a simple twitter. Support the following method: postTweet(user_id, tweet_text). Post a twe ...

  3. appium-Could not obtain screenshot: [object Object]

    原因 App页面已经被禁止截屏,禁用用户截屏的代码如下: getWindow().addFlags(WindowManager.LayoutParams.FLAG_SECURE); setConten ...

  4. 【Android】隐藏底部虚拟按键

    Google的官方文档是: https://developer.android.com/training/system-ui/navigation.html#behind 示例代码 1 View de ...

  5. TcxGrid 调整列位置的事件

  6. java 多重继承

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

  7. [转] 钉钉的H5性能优化方案

    对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环.原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性. 用户感受 当用户能 ...

  8. Java第三阶段学习（六、多线程）

    一.进程和线程的区别: 进程:指正在运行的程序,当一个程序进入内存运行,就变成一个进程. 线程:线程是进程的一个执行单元. 总结:一个程序运行后至少会有一个进程,一个进程可以有多个线程. 多线程:多线 ...

  9. BZOJ 1086 王室联邦 | BFS

    BZOJ 1086 王室联邦 题意 把一棵树分块,每块大小在[B, 3B]之间(B由输入数据给出),每个块需要对应一个核心点,核心点可以在块内,这个点要满足块内每个点到核心点的路径上的点都属于这个块( ...

  10. 打FFT时中发现的卡常技巧

    题目:洛谷P1919 A*B Problem 加强版 我的代码完全借鉴boshi,然而他380ms我880ms...于是我通过彻底的卡(chao)常(dai)数(ma)成功优化到了380ms,都是改了 ...