<table>标签的结构和合并单元格的方法

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>

转载于:https://www.cnblogs.com/zhezh/p/3773428.html