HTML表格

徐云飞

已于 2023-03-30 22:38:35 修改

阅读量57

点赞数

文章标签： html servlet 前端

于 2023-03-30 22:18:53 首次发布

本文链接：https://blog.csdn.net/2203_76039230/article/details/129867043

版权

文章目录

一、form标签
二、table表格

一、form标签

form标签是用于指定表单数据的提交方式和地址。它有以下几个属性：
name：用于指定表单的名称，方便后续提交使用
id：表单的唯一名称，一般用于提交或样式设置
action：用于定义表单数据的提交地址
method：用于指定表单数据的提交方式，有以下几个常用值
get：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数据不能超过4K大小
post：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制
put：用于修改数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可以不用考虑
delete：用于删除数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可以不用考虑
enctype：用于指定表单提交的数据类型，有以下两个值：
multipart/form-data：以二进制流的方式进行提交，一般用于文件上传
application/x-www-form-urlencoded：以文本的方式进行提交，常用方式，默认值

二、table表格

表格标签用于数据展示的，它涉及到 table、tr、td、th等子标签。要定义一个表格，我们需要使用 table 标签，如果要定义一行，我们还需要使用 tr 子标签，要在一行中定义单元格，就需要使用到 td 子标签。

table标签有以下几种属性：

width：用于指定表格的宽度，单位是像素
border：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗
cellpadding：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离
cellspecing：用于定义单元格的外边距，即单元格与单元格之间的距离
align：用于定义表格的对齐方式

table还在以下几个子标签：

caption：用于定义表格的标题
thead：用于定义表头部分
tbody：用于定义表体部分
tfoot：用于定义表尾部分
tr：用于定义表格的一行
th：用于定义一个单元格，它的特点是内容加粗且居中显示

td：用于定义一个单元格 td 标签有几个属性需要说明：

colspan：用于定义跨列操作，也就是合并多个列
rowspan：用于定义跨行操作，也就是合并多个行

列如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>
<body align="center">
    <h3>用户注册</h3>
    <table align="center">
        <tr>
            <td align="right">用户名</td>
            <td align="left"><input type="text" name="username"></td>
        </tr>
        <tr>    
            <td align="right">密码</td>
            <td align="left"><input type="text" name="password"></td>
        </tr>    
            <td align="right">请选择您的性别</td>
            <td align="left"><input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女</td>
        <tr>     
            <td align="right">请选择您的爱好</td>
            <td align="left"><input type="checkbox" name="hobby" value="唱歌">唱歌
            <input type="checkbox" name="hobby" value="跳舞">跳舞
            <input type="checkbox" name="hobby" value="说唱">说唱
            <input type="checkbox" name="hobby" value="篮球">篮球
            <input type="checkbox" name="bobby" value="音乐">音乐</td>
        </tr>
        <tr>
             <td align="right">邮箱</td>
             <td align="left"><input type="text" name="e-mali"></td>
        </tr>
    
        <tr>
             <td align="right">用户头像</td>
             <td align="left"><input type="file" name="head"></td>
        </tr>
        <tr>
             <td align="right">您的家庭住址是</td>
             <td align="left"><select name="province" multiple size="1">
             <option value="西安">西安</option>
             <option value="长安">长安</option>
             <option value="安徽">安徽</option><select></td>
        </tr>
        <tr>
             <td align="right">您的收货地址是</td>
             <td align="left"><select name="province" multiple size="3" maxlength="9">
             <option value="">请选择您的地址</option>   
             <option value="永川">永川</option>
             <option value="江北">江北</option>   
             <option value="万州">万州</option>   
             </select></td>
        </tr>
        <tr>
            <td align="right">请留下您的建议或者意见</td>
            <td align="left"><textarea name="intro" rows="10" cols="30"></textarea></td>
        </tr>
        <tr>
            <td align="right">请选择您喜欢的颜色</td>
            <td><input type="color">
            注册的时间：<input type="date"></td>
        </tr>
        <tr>
        <td align="right"><input type="submit" name="send" value="确定"></td>
        <td align="left"><input type="reset" name="reset" value="重置"></td>
        </tr>
        </table>
</body>
</html>

徐云飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
复制链接

扫一扫