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

摘要：微信搜索【三桥君】
说明：这是关于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">

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

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

一、理论知识

二、参考示例

三、问答

猜你喜欢