表格（十四）

最新推荐文章于 2023-07-05 12:27:49 发布

我以为自己很帅

最新推荐文章于 2023-07-05 12:27:49 发布

阅读量143

点赞数

分类专栏： html5 css web前端文章标签： css html5

本文链接：https://blog.csdn.net/unlockmyname/article/details/117949740

版权

web前端同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

html5

25 篇文章 0 订阅

订阅专栏

css

22 篇文章 0 订阅

订阅专栏

一创建表格

<table>
  <tr>
    <td>...</td>
    <td>...</td>
    ...
  </tr>
  ...
<table>

table整个表格,一个tr表示一行,一个td表示列.

属性:(属性不加单位)

表格属性

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	px	规定表格边框的宽度。默认为 border=“0” 不赞成使用
cellpadding	px*%	规定单元边沿与其内容之间的空白。
cellspacing	px*%	规定单元格之间的空白。
width	%pixels	规定表格的宽度。

width: 单元格的宽度.

表头标签

标签默认居中和加粗.

表格标题

... 默认居中于表格之上.

<table>
  <caption>我是表格标题</ccaption>
</table>

合并单元格(单元格的属性td)

rowspan: 纵向行合并

(从上到下),在代码中需要把被合并的内容给删除.

colspan: 横向列合并

(从左到右),在代码中需要把被合并的内容给删除

<body>
  <table class="wrap"  border="1" align="center" width="300" height="180">
    <tr >
      <td>姓名</td>
      <td>年龄</td>
      <td>性别</td>
    </tr>
    <tr >
      <td rowspan="2" >纵向行合并</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
<!-- <td>小刘</td>      这个是被纵向合并的单元格,需要删除-->      
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小小</td>
      <td colspan="2">横向列合并</td>
 <!-- <td>男</td>      这个是被横向合并的单元格,需要删除-->    
    </tr>
  </table>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ibK8CgSQ-1623810252135)(C:\Users\liu\AppData\Local\Temp\1623729394737.png)]

实际开发中表格表现基本使用成熟UI库实现.

二表单标签(常用)

表单的目的:用来收集用户信息.

表单组成部分:

1.表单控件: input /select /textarea/ button 相当于包含了表单功能项.

2.提示信息: label 表单说明文字,提示用户进行填写和操作.

3.表单域: form 相当于一个大的容器,用来容纳所有的表单控件和提示

用来包裹所有的表单控件提示.

form的属性

<form action="url地址" method="提交方式" name="表单名称">
   各种表单控件
</form>

input控件(最常用)

常用属性	属性值	描述
type	见下表	控制input的类型
name	自定义	控件名称作为提交数据时的 key
value	自定义或输入	input控件中的默认或用户输入的文本
size	正整数	input在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	规定控件容许输入的最大字符数
required	required	必填
readonly	readonly	内容只读
placeholder	文本	用户输入提示文本
multiple	multiple	文件上传可选多文件

####type的属性值

常用类型属性	描述	补充
text	单行文本输入框	明文
password	密码输入框	密文
radio	单选按钮	单选
file	输入字段和 "浏览"按钮，供文件上传。	multiple 属性可以开启多文件选择
checkbox	复选框	多选
submit	提交按钮	提交按钮会把表单数据发送到服务器
button	普通按钮	多数情况下，用于通过js联动
reset	重置按钮	重置按钮会清除表单中的所有数据
image	图像形式的提交按钮。	自定义按钮用的少
hidden	隐藏的输入文本	输入不显示防止窥屏
number 新增	仅限数字	只能输入数字
date 新增	日期选择	年/月/日
tel 新增	电话号码	非有效限制
time 新增	时间选择	00:00
email 新增	电子邮件	非有效限制
search 新增	查询框	可点击x清除内容

label标签属性

label标签为input元素定义标注(标),用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点.

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

##textarea控件(文本域),创建多行文本输入框:**

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

创建下拉菜单

<select>
   <option>选项1</option>
   <option>选项2</option>
   <option>选项3</option>
   ...
</select>

符数" rows=“显示的行数”>
文本内容


## 创建下拉菜单

选项1 选项2 选项3 ... ~~~

我以为自己很帅

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
表格（十四）

一创建表格<table> <tr> <td>...</td> <td>...</td> ... </tr> ...<table>table整个表格,一个tr表示一行,一个td表示列.属性:(属性不加单位)表格属性属性值描述alignleft center right不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。bgc
复制链接

扫一扫