• <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>
    


  • 相关阅读:
    Ubuntu下Nginx安装
    vi基本状态
    07. 背景图片距离
    06. 用css实现三角形
    Leetcode刷题 (二)
    Leetcode刷题 (一)
    目标检测中的AP计算
    python 引用(import)文件夹下的py文件
    git 上传和克隆文件
    Windows系统下Pytorch与python版本不匹配导致模块包导入错误
  • 原文地址:https://www.cnblogs.com/snake-hand/p/3206502.html
Copyright © 2020-2023  润新知