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,表格单元格之间的间距

  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>

  


WEB前端第四课——HTML列表与表格

上一篇:动态网页开发基础


下一篇:css:清除浮动