表单练习2

珵、、、雪

于 2022-01-08 21:47:51 发布

阅读量192

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_45725778/article/details/122387009

版权

前端专栏收录该内容

53 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS属性`border-spacing`来消除HTML表格中单元格之间的空隙，以及在表格外包裹`form`标签来构建有效的表单。示例代码展示了如何实现这些技巧，并提供了一个包含姓名、密码、性别选择、兴趣爱好、城市选择和自我介绍的完整表单示例。

摘要由CSDN通过智能技术生成

目标图

请添加图片描述
问题一：如何消除单元格之间的空隙
答：
1、cellspacing=0用来控制单元格之间的空隙
cellpadding用来控制单元格内容与单元格之间的空隙
2、

table {
    border-spacing: 0;
}

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

问题二：若是一个表单应在table外加form标签。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-spacing: 0;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>Welcome me Login</legend>
        <table border="2px" align="center" style="width: 500px;" >
            <tr align="center">
                <td>
                    姓名：
                </td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr align="center">
                <td>
                    密码：
                </td>
                <td>
                    <input type="password">
                </td>
            </tr>
            <tr align="center">
                <td>
                    确认密码：
                </td>
                <td>
                    <input type="password">
                </td>
            </tr>
            <tr align="center">
                <td>
                    性别：
                </td>
                <td>
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                </td>
            </tr>
            <tr align="center">
                <td>
                    爱好：
                </td>
                <td>
                    <input type="checkbox" name="hobby">吃饭
                    <input type="checkbox" name="hobby">玩耍
                    <input type="checkbox" name="hobby">休息
                </td>
            </tr>
            <tr align="center">
                <td>
                    城市：
                </td>
                <td>
                    <select name="" id="">
                        <option value="none" selected disabled hidden>请选择</option>
                        <option value="bj">北京</option>
                        <option value="hz">杭州</option>
                        <option value="sh">上海</option>
                        <option value="cq">重庆</option>
                        <option value="wh">武汉</option>
                        <option value="zz">郑州</option>
                    </select>
                </td>
            </tr>
            <tr align="center">
                <td>
                    自我介绍：
                </td>
                <td>
                    <textarea name="" id="" cols="30" rows="10" placeholder="属于你个人的介绍，请填写"></textarea>
                </td>
            </tr>
            <tr align="center">
                <td rowspan="1" colspan="2"><input type="submit" name="" id="" value="立即注册"></td>
            </tr>

        </table>
    </fieldset>
</body>
</html>

珵、、、雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单练习2

目标图问题1：如何消除单元格之间的空隙答：table { border-spacing: 0;}border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
复制链接

扫一扫

专栏目录