HTML笔记：表格表单组合实例

最新推荐文章于 2024-02-21 11:54:30 发布

三桥君

最新推荐文章于 2024-02-21 11:54:30 发布

阅读量480

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_46218781/article/details/107785051

版权

HTML+CSS自学之路专栏收录该内容

4 篇文章 2 订阅

订阅专栏

摘要：微信搜索【三桥君】
说明：这是关于HTML5的代码笔记

一、理论知识

无

二、参考示例

1、结果
在这里插入图片描述
2、代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板</title>
    </head>
    <style>
table{
    border-collapse:collapse;
    
}
    </style>
    <body>
       <form>
           <table border="1" cellpadding="30">
                <tbody>
                    <tr align="center">
                        <td rowspan="4">总体信息</td>
                        <td colspan="3">用户注册</td>
                    </tr>
                    <tr align="right">
                        <td>用户名：</td>
                        <td><input type="text" value="请输入用户名"></td>
                    </tr>
                    <tr align="right">
                        <td>密码：</td>
                        <td><input type="text" value="请输入密码"></td>
                    </tr>
                    <tr align="center">
                        <td colspan="3">
                            <input type="submit">&nbsp;&nbsp;
                            <input type="reset">
                        </td>
                        
                    </tr>
                </tbody>
           </table>
       </form>
    </body>
</html>

三、问答

1、如何使边框线条变为实心？

table{
    border-collapse:collapse;
    
}

2、如何设置边框尺寸？
cellpadding

<table border="1" cellpadding="30" >

3、如何使行文字内容居中/居左/居右？
align

<tr align="center">

4、如何合并列/行？

<td rowspan="4">总体信息</td>
<td colspan="3">用户注册</td>

5、如何添加空格？
&nbsp

<input type="submit">&nbsp;&nbsp;
<input type="reset">

文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【三桥君】，回复【关注】有我准备的一份资源大礼包。后续持续更新~~~

三桥君

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML笔记：表格表单组合实例

一、理论知识二、参考示例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>模板</title> </head> <style>table{ border-collapse:collapse; } </style> &
复制链接

扫一扫