zoukankan      html  css  js  c++  java
  • <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>
    


  • 相关阅读:
    Java根据百度API获得经纬度,然后根据经纬度在获得城市信息
    获取鼠标位置的几个通用的JS函数
    java 定时备份数据库
    基于commons-net实现ftp创建文件夹、上传、下载功能
    java自动识别用户上传的文本文件编码
    CSS3实现10种Loading效果
    Java实现拖拽上传
    JAVA 比较两张图片的相似度的代码
    Java jsp页面中jstl标签详解
    mysql去除重复数据
  • 原文地址:https://www.cnblogs.com/snake-hand/p/3206502.html
Copyright © 2011-2022 走看看