zoukankan      html  css  js  c++  java
  • WEB前端第四课——HTML列表与表格

    1.<ul></ul>  无序列表标签

      <ul><li></li></ul>  组合标签,其他标签是不允许组合的

      <li></li> 标签是一个容器,可任意容纳所有的元素

      列表是自带样式属性的

      常用type属性:disc 实心圆(默认)、circle 空心圆、square 小方块、none 不显示

      语法示例:<ul  type="circle">

              <li>列表内容</li>

                                        <li>列表内容</li>

           </ul>

    2.<ol></ol>  有序列表标签,与无序列表类似

      常用type属性:1 表示列表项目用阿拉伯数字标号(1,2,3...)

             a 表示列表项目用小写英文字母标号(a,b,c...)

             A 表示列表项目用大写英文字母标号(A,B,C...)

              i 表示列表项目用小写罗马数字标号(ⅰ,ⅱ,ⅲ...)

              I 表示列表项目大写罗马数字标号(Ⅰ,Ⅱ,Ⅲ...)

      语法结构同无序列表

    3.<dl></dl>  自定义列表标签,自定义列表默认为两个层次,第一层为列表项标签(<dt></dt>),第二层为注释项标签(<dd></dd>),一般用于对术语或名词的解释和描述

      语法示例:<dl>

             <dt> 列表项目1</dt>

             <dd>项目1注释</dd>

             <dt>列表项目2</dt>

             <dd>项目2注释</dd>

           </dl>

    4.表格常用标签

      <table></table>  定义表格

      <caption></caption>  定义表格标题

      <tr></tr>   定义表行,只能包含<td>或<th>标签

      <td></td>    定义单元格

      <th></th>    定义表格页眉单元格

      <thead></thead>  定义表格头

      <tbody></tbody>  定义表格体

      <tfoot></tfoot>  定义表格脚

    5.表格语法示例

    <table align="center" border="2" cellspacing="0" cellpadding="10" width="500px" height="30px" …………>
        <caption>商品出库表</caption>
        <thead>
            <tr>
                <th>产品名称</th>
                <th>业务日期</th>
                <th>出库数量</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>纯牛奶</td>
                <td>2020年2月2日</td>
                <td>22箱</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">系统数据更新中。。。</td>
            </tr>
        </tfoot>
    </table>
    

    6.表格常用属性

      width,表格宽度

      height,表格高度

      align,表格在页面中的水平位置

      background,表格背景图片

      bgcolor,表格背景颜色

      border,表格边框宽度(px),默认没有边框

      bordercolor,表格边框颜色(当border>=1时有效)

      cellspacing,表格单元格之间的间距,默认值为“2px”。

      border-spacing,表示单元格边框之间的距离,属性值为数字,

              一个参数时表示水平和垂直两个方向的间距,

              两个参数时,第一个表示水平间距,第二个表示垂直方向间距。

      empty-cells,设置是否显示空单元格边框,属性值:show(显示)、hide(不显示),默认值为“show”

      border-collapse,表示单元格边框是否合并,

              属性值:collapse(合并为单一边框,忽略border-spacing和empty-cells设置)、separate(边框分开,不重叠)、inherit(继承),

              默认值为“separate”。

      cellpadding,单元格内容与单元格边框之间空白的距离

    7.表格行常用属性

      height,行高

      align,行内容水平对齐方式,参数值“left,center,right”

      valign,行内容垂直对齐方式,参数值“top,middle,bottom”

      bgcolor,行背景颜色

    8.表格列常用属性

      width/height,单元格宽度/高度

      align,列内容水平对齐方式

      valign,列内容垂直对齐方式

      bgcolor,列背景颜色

      colspan,设置列单元格合并

      rowspan,设置行单元格合并

    9.单元格合并示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建表格测试</title>
    </head>
    <body>
        <table border="2px" width="600px" height="600px" align="center" cellspacing="0">
            <caption>测试表</caption>
            <tr>
                <td colspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"></td>
            </tr>
        </table>
    </body>
    </html>
    

      

  • 相关阅读:
    ASP.NET 4的Demo实践:URL“.NET研究”路由改进支持 狼人:
    在.NET Workflo“.NET研究”w 3.5中使用多线程提高工作流性能 狼人:
    Reg“.NET研究”exOptions.Compiled的含义和使用 狼人:
    ASP.“.NET研究”NET MVC3 on Mono的折腾(二):Linux(openSUSE)下的部署 狼人:
    C#编程笔记(一)“.NET研究” 狼人:
    Sh“.NET研究”arePoint开发笔记SharePoint2010添加ASP.NET应用程序 狼人:
    分享在MVC3.0中使用jQue“.NET研究”ry DataTable 插件 狼人:
    Silverlight 游戏开发“.NET研究”小技巧:血条和进度条 狼人:
    .N“.NET研究”ET中的异步编程(二) 传统的异步编程 狼人:
    不错的VS2010扩展——JSEnhancements,让js和c“.NET研究”ss也折叠 狼人:
  • 原文地址:https://www.cnblogs.com/husa/p/13325220.html
Copyright © 2011-2022 走看看