HTML notes: table form combination example

Abstract: WeChat search [ Sanqiao Jun ]
Description: This is a code note about HTML5

1. Theoretical knowledge

no

2. Reference example

1. Result
Insert picture description here
2. Code

<!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>

3. Q&A

1. How to make the border lines solid?

table{
    border-collapse:collapse;
    
}

2. How to set the frame size?
cellpadding

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

3. How to make the line text content center/left/right?
align

<tr align="center">

4. How to merge columns/rows?

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

5. How to add spaces?
 

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

It is not easy to organize articles. If you have any help, please like and follow your support, thank you! Wechat search for [ Sanqiao Jun ], and reply [Follow] with a resource package prepared by me. Follow-up continuous update~~~

Guess you like

Origin blog.csdn.net/weixin_46218781/article/details/107785051