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. Loadrunner里面的深入理解Resource 的 0和1

    最近在倒腾loadrunner,发现一些非常有意思的配置项,也许同学们平时去玩的时候,没有注意这些点.我也查阅了网上的帖子,说的都不够详细~操作起来的话,同学们也只是看到文字的描述,并不能发现区别.今 ...

  2. mysql_存储过程_后一行减去前一行

    DELIMITER $$ /*统计单个用户登录次数的存过 @times_count int 返回值 @i 记录行号的变量 初始值为0 @temp 记录时间差的变量 @total 记录登录次数的变量 初 ...

  3. mysql区间范围查询问题

    一,日期区间查询,表里有一个时间字段 最常见的就是某时间段查询,比如xxxx时间---xxxx时间有多少条数据.例如数据库里的字段是 income_period, 该字段类型可以是字符串(varcha ...

  4. python3转变exe的方法

    python开发的代码可能在其他windows上并不能使用用,除非别人的环境中也有python. 下面是如何将python开发的东西转为exe格式 1.安装pyinstaller pip instal ...

  5. Windows修改默认远程端口号3389

    1.打开注册表:运行-regedit: 2.HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Terminal Server\Wds\Repwd\ ...

  6. casperjs批量执行多个url

    var fs=require("fs"); ////-------sample.js-------// //casperオブジェクトを生成var casper = require( ...

  7. 2010 NEERC Western subregional

    2010 NEERC Western subregional Problem A. Area and Circumference 题目描述:给定平面上的\(n\)个矩形,求出面积与周长比的最大值. s ...

  8. @PostConstruct和@PreConstruct

    详情参见:https://www.cnblogs.com/landiljy/p/5764515.html 1.@PostConstruct说明 被@PostConstruct修饰的方法会在服务器加载S ...

  9. 2018-2019-2 网络对抗技术 20165301 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165301 Exp3 免杀原理与实践 实验内容 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用 ...

  10. 《高性能MySQL》学习笔记

    第1章 MySQL架构与历史 1.2 并发控制 MySQL在两个层面实现并发控制:服务器层与存储引擎层. 读锁和写锁: 在处理并发读或写时,可以通过实现一个由两种锁组成的系统来解决问题. 这两种锁通常 ...