前端基础笔记-HTML-表格

目录

  • 表格标签
    • 基本操作
    • 合并单元格
    • 补充-表格结构划分
  • 列表标签
    • 无序列表
    • 有序列表
    • 自定义列表
  • 表单标签
  • form表单域

表格标签

基本操作

表格标签

属性名 含义 常用值
border 边框 像素
width 像素
height 像素
align 表格整体的对齐方式 left、right、center
cellspacing 单元格的边框之间的间距 像素,一般设置为0比较好看
cellpadding 单元格内容与单元格边框的距离 像素

表格标题标签
内容默认居中,并且显示在表格的正上方

行标签

单元格标签

表头标签
特殊的单元格标签,其中文字加粗居中

例:


"en">

    "UTF-8">
    表格


    "1" align="center" width="500" height="300" cellspacing="0" cellpadding="10">
        
个人信息表
编号 姓名 年龄
01 小红 12
02 小红 12
03 小兰 11
04 小明 9

前端基础笔记-HTML-表格_第1张图片

合并单元格

跨行合并rowspan
跨列合并colspan
例:


"en">

    "UTF-8">
    表格


    "1" align="center" width="500" height="300" cellspacing="0" cellpadding="10">
        
个人信息表
编号 姓名 年龄
"2">01 12
02 小红 12
03 小兰 11
04 小明 9

前端基础笔记-HTML-表格_第2张图片

补充-表格结构划分

就像html中,有head和body之分一样,表格的结构也可以划分为头部,内容主体以及脚注三个部分。
需要注意的是,头部标签中必须包含表格行标签。
由此,针对这个表格例子,可以为它加上结构划分。


"en">

    "UTF-8">
    表格


    "1" align="center" width="500" height="300" cellspacing="0" cellpadding="10">
        
个人信息表
编号 姓名 年龄
01 小红 12
02 小红 12
03 小兰 11
04 小明 9
"3"> 这里是注释

前端基础笔记-HTML-表格_第3张图片

列表标签

无序列表

通常用于展示无先后顺序的数据,比如选择题的选项,产品的列表等。
注意,ul标签中只能有li标签
例:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    列表


    

请选择出场人物

  • 小黑
  • 阿力
  • 苍牙
  • 小椒

前端基础笔记-HTML-表格_第4张图片

有序列表

用来展示有一定先后顺序的数据,比如成绩排名等
同样的,ol标签中也只能包含li标签
例:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    列表


    

成绩排行榜

  1. 苍牙
  2. 小椒
  3. 阿力
  4. 小黑

前端基础笔记-HTML-表格_第5张图片

自定义列表

例:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    列表


    

地区

杭州
高沙
下沙
西湖
滨江
江苏
南京
苏州

前端基础笔记-HTML-表格_第6张图片

表单标签

input控件
前端基础笔记-HTML-表格_第7张图片
前端基础笔记-HTML-表格_第8张图片

label标签
作用主要是为了优化用户体验,点击label标签即可获得对应输入框的输入焦点。一般有两种方式,一是直接将input控件写在label标签之内,二是利用label标签中的for属性和input控件中的id属性,类似于锚点定位。


 
"password" name="passwd" id="pswd" />

textarea控件
文本域,可以输入多行的文本,区别于text只能输入单行文本。多用于留言板,评论等。

    
     

select下拉列表

    
     

一个简陋的注册页面:


"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    表单


    "600" align="center">
        

注册页面

请输入用户名: "text" name="usernme" />
请选择性别: "radio" name="sex"/>男 "radio" name="sex"/>女 "radio" name="sex"/>保密
请选择偏好(可多选): "checkbox" name="hobbies" checked="checked" />互联网 "checkbox" name="hobbies"/>金融 "checkbox" name="hobbies"/>教育 "checkbox" name="hobbies"/>语言
请输入密码: "password" name="passwd" />
请选择所在地区:
上传头像: "file" name="headpicture" />
个人简介:
"image" src="#" name="registerbutton"/> "reset" name="resetbutton"/>

前端基础笔记-HTML-表格_第9张图片

form表单域

前端基础笔记-HTML-表格_第10张图片

你可能感兴趣的:(前端基础笔记-HTML-表格)