zoukankan      html  css  js  c++  java
  • HTML初步学习7

    关于表格

    表格是用于排列内容的最佳手段,在HTML页面中,绝大多数页面都是表格排版,表格主要由 表格标<table>、行标记<tr>、单元格标记<td>构成

    以下几点:

    <!--表格宽度可调,高度同理 height ,不过宽度是总宽度。。。-->
    
    <!--对齐方式可调,align=center, left,right,不过放在table这,就是整体位置,放在tr标签内,就是调整单行-->
    
    <!--border——边框 bordercolor——边框颜色 cellspacing——内框宽度 cellpadding——文字和边框(上下左右)距离调整—>
    
    <!--背景颜色用bgcolor="#XXXXXX" 背景图片用background—>
    
    <!--上述的在table中的属性,在tr、td中也可以用(当然有些可能无效),当然,tr、td有特殊的valign用来调整行文字的垂直对齐方式—>

    效果图1:

    image

    代码:

      1 <!doctype html>
      2 <html lang="en">
      3  <head>
      4   <meta charset="UTF-8">
      5   <title>Table</title>
      6  </head>
      7  <body>
      8  <!--表格宽度可调,高度同理 height ,不过宽度是总宽度。。。-->
      9  <!--对齐方式可调,align=center, left,right,不过放在table这,就是整体位置,放在tr标签内,就是调整单行-->
     10  <!--border————边框 bordercolor————边框颜色 cellspacing————内框宽度 cellpadding————文字和边框(上下左右)距离调整-->
     11  <!--背景颜色用bgcolor="#XXXXXX" 背景图片用background-->
     12  <!--上述的在table中的属性,在tr、td中也可以用(当然有些可能无效),当然,tr、td有特殊的valign用来调整行文字的垂直对齐方式-->
     13   <table  width="400" border="3" bordercolor="blue" cellspacing="10" cellpadding="10" background="images/2.jpg">
     14   <caption align="bottom"><b>表格标题_下面</b></caption>
     15   <tr align="center" height="80" bordercolor="white" valign="middle" >
     16       <th>加粗的表头</th>
     17       <th>第一项</th>
     18 	  <th>第二项</th>
     19   </tr>
     20   <tr align="right">
     21       <td>第一行</td>
     22       <td>第一行-1</td>
     23 	  <td>第一行-2</td>
     24   </tr>
     25   <tr align="left">
     26       <td>第二行</td>
     27       <td>第二行-1</td>
     28 	  <td>第二行-2</td>
     29   </tr>
     30   </table>
     31  </body>
     32 </html>
    基本表格操作1

    再加几点:

    <!--跨行操作——colspan 当然,有行必有列,列用:rowspan—>
    
    <!--有时候虽然是对单元格的单个操作,但是,往往调整一个会牵扯到别的,由于23行的91.1下面28行的77作废了,但是40使得整行发生了改变—>
    
    <!--左上边框:bordercolorlight     右下边框 bordercolordark—>
    
    <!--表头标记,一个表元素只能有一个<thead>标记—>
    
    <!--tbody是用来统一设计表主体部分的样式—>
    
    <!--最后表格的嵌套我就不说什么了,就是td标签里套table标签,没啥好说的—>

    效果图:

    代码:

    image

      1 <!doctype html>
      2 <html lang="en">
      3  <head>
      4   <meta charset="UTF-8">
      5   <title>Table2</title>
      6  </head>
      7  <body>
      8  <!--表格宽度可调,高度同理 height ,不过宽度是总宽度。。。-->
      9  <!--对齐方式可调,align=center, left,right,不过放在table这,就是整体位置,放在tr标签内,就是调整单行-->
     10  <!--border————边框 bordercolor————边框颜色 cellspacing————内框宽度 cellpadding————文字和边框(上下左右)距离调整-->
     11  <!--背景颜色用bgcolor="#XXXXXX" 背景图片用background-->
     12  <!--上述的在table中的属性,在tr、td中也可以用(当然有些可能无效),当然,tr、td有特殊的valign用来调整行文字的垂直对齐方式-->
     13   <table  width="400" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" background="images/man2.jpg">
     14   <!--跨行操作——colspan 当然,有行必有列,列用:rowspan-->
     15   <!--表头标记,一个表元素只能有一个<thead>标记-->
     16   <thead bgcolor="#FFAAEE" valign="middle">
     17   <tr align="center"bordercolor="#FDACAA"><td colspan="3"><b>单元格操作+表格结构</b></td></tr>
     18   </thead>
     19   <!--tbody是用来统一设计表主体部分的样式-->
     20   <tbody bgcolor="#EEAAFF" align="right">
     21   <tr align="center" height="49" bordercolor="#3CFED0" valign="middle">
     22   <!--虽然是对单元格的单个操作,但是,往往调整一个会牵扯到别的,下面的77作废了,但是40使得整行发生了改变-->
     23       <th width="91.1">加粗的表头</th>
     24       <th>第一项</th>
     25 	  <th>第二项</th>
     26   </tr>
     27   <tr bordercolorlight="#FA3433" bordercolordark="#3343AF">
     28       <td width="77" height="40">第一行</td>
     29       <td >第一行-1</td>
     30 	  <td>第一行-2</td>
     31   </tr>
     32   <tr>
     33       <td>第二行</td>
     34       <td>第二行-1</td>
     35 	  <td>第二行-2</td>
     36   </tr>
     37   </tbody>
     38   <tfoot bgcolor="#FD3421">
     39   <tr align="right">
     40       <td colspan="3">我是表尾</td>
     41   </tr>
     42   <tfoot>
     43   </table>
     44  </body>
     45 </html>
    表格操作2
  • 相关阅读:
    使用RestTemplate进行服务调用的几种方式
    springmvc学习指南 之---第32篇 mybatis 嵌套的处理
    springmvc学习指南 之---第31篇 使用墨客进行测试报错
    springmvc学习指南 之---第30篇 异常的全局处理
    Effective Java 阅读笔记--之(一) 建造者模式(Builder)
    使用mybatis-generator.xml 生成PO 对象
    springmvc学习指南 之---第29篇 springmvc 返回json对象, 不想创建类的前提下
    springmvc学习指南 之---第28篇 springmvc的controller 如何解析视图view? 如何解析json,html,jsp?
    springmvc学习指南 之---第27篇 spring如何实现servlet3.0无web.xml 配置servlet对象的
    springmvc学习指南 之---第26篇 在idea中如何debug跟踪到tomcat内部代码
  • 原文地址:https://www.cnblogs.com/puluotiya/p/4849238.html
Copyright © 2011-2022 走看看