HTMLノート:テーブルフォームの組み合わせの例

要約:WeChat検索[ Sanqiao Jun ]
説明:これはHTML5に関するコードノートです。

1.理論的知識

番号

2.参考例

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>

3. Q&A

1.境界線を実線にする方法は?

table{
    border-collapse:collapse;
    
}

2.フレームサイズの設定方法は?
セルパディング

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

3.行テキストのコンテンツを中央/左/右にする方法は?
整列

<tr align="center">

4.列/行をマージする方法は?

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

5.スペースを追加するにはどうすればよいですか?
&nbsp

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

記事を整理するのは簡単ではありません。何か助けがあれば、あなたのサポートを気に入ってフォローしてください、ありがとう!Wechatで[ SanqiaoJun ]を検索し、私が用意したリソースパッケージで[Follow]に返信します。フォローアップ継続更新~~~

おすすめ

転載: blog.csdn.net/weixin_46218781/article/details/107785051