zoukankan      html  css  js  c++  java
  • HTML表格

    1,<table>标记

      a,基本格式<table 属性1=“属性值” 属性2 =属性值>表格内容</table>

      b,table 标记的属性

        

        width属性:表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分之百(%)

        height属性:表示表格的高度,他的值可以是像素(px)也可以是父级元素的百分比(%)

        border属性:表示表格外边框的宽度

        align属性:表格的显示位置,值left居左显示   center居中显示  right居右显示  默认left

        cellspacing属性:单元格时间的间距,默认2px ,单位像素

        cellpadding属性:单元格内容与单元格边框的显示距离,单位像素

        frame属性:控制表格边框的显示距离

          void(默认值) 表示无边框

          above 表示仅顶部有边框

          below 表示仅有底部边框

          hsides 表示仅有顶部边框和底部有边框

          lhs 表示仅有左侧边框

          rhs表示仅有右侧边框

          vsides表示仅有左右侧边框

          box 包含全部4个边框

          border包含全部4个边框

       rules属性:控制是否显示以及如何显示单元格之间的分割线

          none(默认值)表示无分割线

          all 表示包括所有分隔线

          rows表示仅有行分割线

          clos表示仅有列分割线

          groups表示仅在行组合列组之间有分割线

      c,制作一个简单的网页布局

    2,<caption>标记

      a,什么时候使用?在什么时候使用如果表格需要使用标题,那么就可以使用<caption>标记

      b,如何使用?<caption>属性的插入位置,直接位于<table>属性之后就,<tr>表格行之前 

      c,align属性 

        top:标题放在表格的上部

        botton:标题放在表格的下部

        left:标题放在表格的左边

        right:标题放在表格的右边

    3,<tr>标记

      a,定义表格的一行,对于每一个表格行,都是由一对<tr>...</tr>标记表示,每一行<tr>标记哪可以嵌套多个<td>或者<th>标记

      b,可选属性

        设置水平对齐方式 格式:align=“颜色值”

        botton:靠顶端对齐

        top:靠底部对齐

        middle:居中对齐

    4,<td>和<th>

      a,<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,是成对出现

      b,<th>是表头标记,通常位于首行或者首列,<th>中的文字默认会被加粗,而<td>不会

      c,<td>是数据标记,表示该单元格的具体数据

      d,两者的标记属性都是一样的

      e,属性

        bgcolor:设置单元格背景

        align:设置单元格背景

        valign:设置单元格垂直对齐方式

        width:设置单元格宽度

        height:设置单元格高度

        rowspan:设置单元格所占行数

        clospan:设置单元格所占列数

    eg:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>表格</title>
    </head>
    <body>
    <table width="960" height="250" border="1" align="center" cellpadding="10" frame="box" >
    <caption align="top">表格的标题</caption>
    <tr bgcolor="#ccc" align="left">
    <th bgcolor="red" align="left">班级</th>
    <th>姓名</th>
    <th>年级</th>
    <th>成绩</th>

    </tr>
    <tr>
    <td>四年级一班</td>
    <td>张三</td>
    <td>16</td>
    <td>80</td>
    </tr>
    <tr>
    <td>四年级一班</td>
    <td>李四</td>
    <td>16</td>
    <td>70</td>
    </tr>
    <tr>
    <td>四年级一班</td>
    <td>王五</td>
    <td>16</td>
    <td>60</td>
    </tr>
    </table>
    </body>
    </html>
  • 相关阅读:
    实时获取管道信息的一个小框架
    multiprocessing还是threading?
    QThread的一些使用心得
    super超类继承特点小结
    打靶总结
    简析Colorspace
    第一个Unity3D脚本
    一个新的计划,写在年末
    lambda函数的特性
    Nuke Python module的使用
  • 原文地址:https://www.cnblogs.com/lzp1103/p/7806828.html
Copyright © 2011-2022 走看看