HTML——使用表格对表单进行布局

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML——使用表格对表单进行布局相关的知识，希望对你有一定的参考价值。

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用表格对表单进行布局</title>
</head>

<body>
	<form action="#" method="post">
    	<table width="450" border="0" bgcolor="#000000" cellspacing="1" cellpadding="2"><!--cellspacing指相邻单元格之间的间距。cellpadding指控制单元格内部文字与边框的边距-->
        <tbody>
        	<tr height="30">
            	<td colspan="2" align="center" bgcolor="#CCCCCC"><font size="5">用户注冊</font></td>
            </tr>
            <tr height="30">
            	<td width="150" align="right" bgcolor="#E6E6E6">username</td>
                <td width="300" bgcolor="#E6E6E6">
                	<input type="text" name="UserName" maxlength="20" size="15" /></td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">密码</td>
                <td bgcolor="#E6E6E6">
                	<input name="UserPass" type="password" size="15" maxlength="20" /></td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">反复密码</td>
                <td bgcolor="#E6E6E6">
                	<input name="UserPass" type="password" size="15" maxlength="20" /></td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">性别</td>
                <td bgcolor="#E6E6E6">
                	<input name="sex" type="radio" value="男" checked="checked" />男
                    <input name="sex" type="radio" value="女" />女
                </td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">爱好</td>
                <td bgcolor="#E6E6E6">
                	<input name="like" type="checkbox" value="1" />足球
                    <input name="like" type="checkbox" value="2" />篮球
                    <input name="like" type="checkbox" value="3" />乒乓球
                </td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">省份</td>
                <td bgcolor="#E6E6E6">
                	<select name="province">
                    	<option>陕西省</option>
                        <option>山东省</option>
                        <option>山西省</option>
                        <option>河北省</option>
                        <option>河南省</option>
                        <option>湖南省</option>
                        <option>湖北省</option>
                        <option>黑龙江省</option>
                        <option>其它</option>
                   </select>
                </td>
            </tr>
            <tr height="30">
            	<td align="right" bgcolor="#E6E6E6">自我介绍</td>
                <td bgcolor="#E6E6E6">
                	<textarea name="Intro" cols="40" rows="5" id="Intro"></textarea></td>
            </tr>
            <tr height="30">
            	<td align="center" colspan="2" bgcolor="#CCCCCC">
                	<input type="submit" name="send" value="提交" />
                    <input type="reset" name="reset" value="重置" />
                </td>
            </tr>
        </tbody>
        </table>
	</form>
</body>
</html>

以上是关于HTML——使用表格对表单进行布局的主要内容，如果未能解决你的问题，请参考以下文章

在 Android 中使用具有多个布局的单个片段

如何使子表单行项目在 zoho creator 片段页面的 HTML 表格中仅出现一次？

使用CSS对HTML表单进行修饰,效果与excel表格类似，可以输入数据。

片段内的表格布局

带下拉框的选项代码怎么写？