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
  • 相关阅读:
    linux内核中GNU C和标准C的区别
    linux内核中GNU C和标准C的区别
    Getting start with dbus in systemd (02)
    Getting start with dbus in systemd (01)
    Getting start with dbus in systemd (03)
    物理内存相关的三个数据结构
    数据类型对应字节数(32位,64位 int 占字节数)
    Linux kernel 内存
    共模电感的原理以及使用情况
    [原创]DC-DC输出端加电压会烧毁
  • 原文地址:https://www.cnblogs.com/puluotiya/p/4849238.html
Copyright © 2011-2022 走看看