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>
    


  • 相关阅读:
    项目的搭建步骤:
    MySQL复习笔记记录
    记录搭建SSM框架中常用到的功能:(监听器)、过滤器和拦截器 以及相关的拓展内容的学习记录
    为什么要配置spring**.xml或者applicationContext.xml --学习笔记
    java8 Lambda表达式学习笔记
    java多线程高并发学习从零开始——初识volatile关键字
    java多线程高并发学习从零开始——新建线程
    JVM工作机制以及异常处理之内存溢出OOM(OutOfMemoryError)/SOF(StackOverflowError)--Java学习记录2——更新中
    记录使用idea构建出现错误:failed to execute goal org.apache.maven.plugins:maven-javadoc-plugin:2.9.1:jar——Java学习记录3
    Oracle创建用户和表空间的步骤 和 导入dmp文件的方法 —— 数据库学习
  • 原文地址:https://www.cnblogs.com/snake-hand/p/3206502.html
Copyright © 2011-2022 走看看