其他分享
首页 > 其他分享> > HTML表格提例

HTML表格提例

作者：互联网

1.草稿

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 基本属性 -->
		<!-- border 设置边框线的粗细 -->
		<!-- tb 表标题 -->
		<!-- colspan 后面的数字是多少就包括多少列-->
		<!-- rowspan 后面的数字是多少就包括多少行-->
		<!-- caption 表头-->
		<table border="2">
			1.不会跨行的表格（基本表格）
			<tr>
				<td>1行1列的单元格</td>
				<td>1行2列的单元格</td>
				<td>1行3列的单元格</td>
			</tr>
			<tr>
				<td>2行1列的单元格</td>
				<td>2行2列的单元格</td>
				<td>2行3列的单元格</td>
			</tr>
		</table>
		<p></p>
		<!-- 2.跨列的表格（跨行的那一列长一些，可包括多个值） -->
		<table width="200" border="1">
			<tr>
				<tb>学生成绩</tb>
				<td colspan="3">学生成绩</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
		</table>
		<p></p>
		<!-- 3.跨行的表格 (跨行的那一行长一些，可包括多个值)-->
		<table width="200" border="1">
			<tr>
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr> -->

			<!-- <!-- <tr> -->
			<td rowspan="2">李四</td>
			<td>语文</td>
			<td>88</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>91</td>
			</tr>
		</table>
		<P></P>
		<table width="500" border="1">
			<tr>
				<td colspan="3">家用电器</td>
			</tr>
			<tr>
				<td>家用电器</td>
				<td>大家电</td>
				<td>洗衣机</td>
			</tr>
			<tr>
				<td>电热水器</td>
				<td>家庭音响</td>
				<td>热水器</td>
			</tr>
			<tr>
				<td colspan="3">书籍</td>
			</tr>
			<tr>
				<td>文学</td>
				<td>传记</td>
				<td>艺术</td>
			</tr>
			<tr>
				<td>军事</td>
				<td>财经</td>
				<td>世界名著</td>
			</tr>
		</table>
		<p></p>
		跨行跨列的表格
		<table width="500" border="1">
			<tr>
				<td rowspan="2">收藏</td>
				<td>钱币</td>
				<td>紫砂</td>
				<td>瓷器</td>
			</tr>
			<tr>
				<td>古玩</td>
				<td>和田玉</td>
				<td>字画</td>
			</tr>
			<tr>
				<td>家居</td>
				<td>灯具</td>
				<td>自行车</td>
				<td>皮包</td>
			</tr>
		</table>
		<p></p>
		<table width="200" border="1">
			<tr>
				<td colspan="3">学生成绩</td>
			</tr>
			<tr>
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
			<tr>
				<td rowspan="2">李四</td>
				<td>语文</td>
				<td>88</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>91</td>
			</tr>
		</table>
		<p></p>
		<!-- 4.tfoot等分组用法 ()-->
		<table width="30%">
			<caption>年终数据报表</caption>
			<!-- 设置表头 -->
			<thead style="background-color: aqua;">
				<tr>
					<th>月份</th>
					<th>收入（RMB）</th>
				</tr>
			</thead>
			<tbody style="background-color: #9CC;">
				<tr>
					<td>一月</td>
					<td>100</td>
				</tr>
				<tr>
					<td>2月</td>
					<td>80</td>
				</tr>
				<tr>
					<td>3月</td>
					<td>300</td>
				</tr>
				<tr>
					<td>4月</td>
					<td>400</td>
				</tr>
				<tr>
					<td>5月</td>
					<td>100</td>
				</tr>
				<tr>
					<td>6月</td>
					<td>200</td>
				</tr>
			</tbody>
			</thead>
			</tbody>
			<tfoot style="background: #FF0">
				<tr>
					<td>平均月收入</td>
					<td>196.67</td>
				</tr>
				<tr>
					<td>总计</td>
					<td>1180</td>
				</tr>
			</tfoot>
		</table>
		<p></p>
		<!-- 6.图文布局 -->
		<table border="1px">
			<tr>
				<td colspan="2"><img src="img/a_title.jpg" alt="公告栏"></td>
			</tr>
			<td rowspan="4"><img src="img/a_left.jpg" alt="公告左侧图" /></td>
			<td>大学要求老师开网店</td>
			</tr>
			<tr>
				<td>安全锤网上大热销</td>
			</tr>
			<tr>
				<td>商城竟成网购试衣间</td>
			</tr>
			<tr>
				<td>2万网上开十间连锁店</td>
			</tr>
		</table>
		<p></p>
		<!-- 7.登录表单 -->
		<form method="post" action="login_success.htm"></form>
		<table>
			<tr>
				<td><img src="img/title_login_2.png" alt="alt" /></td>
				<td colspan="2">&nbsp;</td>
			</tr>
			<tr>
				<td></td>
				<td>会员名:</td>
				<td>
					<input name="sname" type="text" size="15" />（可包含 a-z、0-9 和下划线）
				</td>
			</tr>
			<tr>
				<td></td>
				<td>密&nbsp;&nbsp;码:</td>
				<td><input name="pass" type="password" size="15" />（至少包含 6 个字符）</td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2">
					<input type="image" style="border:0px;" name="Button" src="./img/login.gif" />
				</td>
			</tr>
		</table>
		<p></p>
		<!-- 8.表格嵌套 -->
		<table border="10">
			<tr>
				<td>
					<table border="2">
						<tr>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="25px">&nbsp;</td>
						</tr>
					</table>
					<table border="2">
						<tr>
							<td width="25px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
						</tr>
					</table>
					<table border="2">
						<tr>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="25px">&nbsp;</td>
						</tr>
					</table>
				</td>
				<td>
					<table border="2">
						<tr>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="25px">&nbsp;</td>
						</tr>
					</table>
					<table border="2">
						<tr>
							<td width="25px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
						</tr>
					</table>
					<table border="2">
						<tr>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="50px">&nbsp;</td>
							<td width="25px">&nbsp;</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

 2.跨行跨列表格，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="500" border="1">
				<tr>
					<td colspan="4">商品成绩</td>
				</tr>
				<tr>
					<td rowspan="3">虚拟</td>
					<td>移动</td>
					<td>联通</td>
					<td>小灵通</td>
				</tr>
				<tr>
					<td>充值卡</td>
					<td>彩票</td>
					<td>双色球</td>
				</tr>
				<tr>
					<td>梦幻 </td>
					<td>QQ</td>
					<td>游戏币</td>
				</tr>
	<tr>
					<td rowspan="3">护肤</td>
					<td>美容护肤</td>
					<td>媒体</td>
					<td>精油</td>
				</tr>
				<tr>
					<td>彩妆</td>
					<td>香水</td>
					<td>没法</td>
				</tr>
				<tr>
					<td>个人护肤 </td>
					<td>保健</td>
					<td>按摩器械</td>
				</tr>
			</table>
	</body>
</html>

 3.商品分类页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- tr行 td列 -->
		<table>
			<tr>
				<td colspan="4"><img src="img/list_bg.gif"></td>
				<!-- 	<td>商品</td>
			<td>商品</td>
			<td>商品</td> -->
			</tr>
			<tr>
				<td rowspan="4"><input type="checkbox" name="" id="" value="" /></td>
				<td>商品图片</td>
				<td>商品名称/卖家</td>
				<td>价格</td>
			</tr>
			<tr>
				<!-- <td>商品</td> -->
				<td rowspan="3"><img src="img/list0.jpg"></td>
				<td>三国群英转免费区</td>
				<td><br><br>一口价</td>
			</tr>
			<tr>
				<!-- <td>商品</td> -->
				<!-- <td>商品</td> -->
				<td>卖家：lingtrue</td>
				<td><br><br>283.30</td>
			</tr>
			<tr>
				<!-- <td>商品</td> -->
				<!-- <td>商品</td> -->
				<td><img src="img/online_pic.gif">&nbsp<img src="img/list_tool_fav1.gif">收藏</td>
				<td></td>
			</tr>
			<tr>
				<td rowspan="4"><input type="checkbox" name="" id="" value="" /></td>
				<td><br></td>
				<td><br></td>
				<td><br></td>
			</tr>
			<tr>
				<!-- <td>商品</td> -->
				<td rowspan="3"><img src="img/list3.jpg"></td>
				<td>三国群英转免费区</td>
				<td><br><br>一口价</td>
			</tr>
			<tr>
				<!-- <td>商品</td> -->
				<!-- <td>商品</td> -->
				<td>卖家：蓝天</td>
				<td><br><br>486.30</td>
			</tr>
			<tr>
				<!-- <td>商品</td> -->
				<!-- <td>商品</td> -->
				<td><img src="img/online_pic.gif">&nbsp<img src="img/list_tool_fav1.gif">收藏</td>
				<td></td>
			</tr>
		</table>


	</body>
</html>

 4.注册表单，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<tr>
				<td>登录名：</td>
				<td><input type="text" name="" id="" value="" /></td>
				<td>（可包含a-z、0-9和下划线）</td>
				<td ><img src="img/read.gif" ><span style="color: black;"><b>阅读服务协议</b></span></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="" id="" value="" /></td>
				<td>（至少包含6个字符）</td>
				<td rowspan="8"><textarea rows="20" cols="30">欢迎阅读服务条款协议······</textarea></td>
			</tr>
			<tr>
				<td>再次输入密码：</td>
				<td><input type="password" name="" id="" value="" /></td>
				<!-- <td></td> -->
				<!-- <td>商品</td> -->
			</tr>
			<tr>
				<td>电子邮箱：</td>
				<td><input type="email" name="" id="" value="" /></td>
				<td>（必须包括@符号）</td>
				<!-- <td>商品</td> -->
			</tr>
			<tr>
				<td>性别：</td>
				<td><img src="img/Male.gif" ><input type="radio" name="sex" id="" value="男" />男<img src="img/Female.gif" ><input type="radio" name="sex" id="" value="女" />女</td>
				<td></td>
				<!-- <td>商品</td> -->
			</tr>
			<tr>
				<td>头像</td>
				<td><input type="file" name="" id="" value="" /></td>
				<td></td>
				<!-- <td>商品</td> -->
			</tr>
			<tr>
				<td>爱好：</td>
				<td><input type="checkbox" name="" id="" value="" />运动<input type="checkbox" name="" id="" value="" />聊天<input type="checkbox" name="" id="" value="" />玩游戏</td>
				<td></td>
				<!-- <td>商品</td> -->
			</tr>
			<tr>
				<td>喜欢的城市</td>
				<td><select name="">
					<option value="">请选择</option>
				</select></td>
				<td></td>
				<!-- <td>商品</td> -->
			</tr>
			<tr>
				<td></td>
				<td><input type="" name="" id="" placeholder="hhdsad" /><input type="submit" name="" id="" value="重填" /></td>
				<td>商品</td>
				<!-- <td>商品</td> -->
			</tr>
		</table>
	</body>
</html>

5. 手写表格布局数据显示，代码如下：

<!DOCTYPE html>
<html>
    <!-- 写一个合并就要注意行和列的数量变化 -->
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table width="800" border="1">
            <caption>年度工资报告</caption>
            <tr style="background-color: aqua;">
                <td ><b>区域办事处</b></td>
                <td ><b>岗位</b></td>
                <td ><b>姓名</b></td>
                <td ><b>工资（RMN）</b></td>
            </tr>
            <tr>
                <td rowspan="3" style="background-color: cadetblue;">华东区</td>
                <td rowspan="2" style="background-color: cadetblue;">人事专员</td>
                <td style="background-color: cadetblue;">张明</td>
                <td style="background-color: cadetblue;">1500</td>
            </tr>
            <tr style="background-color: cadetblue;">
                <!-- <td>1</td> -->
                <!-- <td><td> -->
                <td>网红</td>
                <td>1500</td>
            </tr>
            <tr style="background-color: cadetblue;">
                
            <!--     <td></td> -->
                <td rowspan="3">软件开发工程</td>
                <td>李开艳</td>
                <td>6000</td>
            </tr>
            <tr style="background-color: cadetblue;">
                <td rowspan="2">中南区</td>
                <td>李开元</td>
                <td>6000</td>
            </tr>
            <tr style="background-color: cadetblue;">
                
                <td>梁超</td>
                <td>5000</td>
            </tr>
            <tr style="background-color: yellow;">
                <td colspan="3">总计</td>
                <!-- <td>1</td> -->
                <!-- <td></td> -->
                <td>19000</td>
            </tr>
            
        </table>
    </body>
</html>

<!DOCTYPE html>
<html>
	<!-- 写一个合并就要注意行和列的数量变化 -->
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="800" border="1">
			<caption>年度工资报告</caption>
			<tr style="background-color: aqua;">
				<td ><b>区域办事处</b></td>
				<td ><b>岗位</b></td>
				<td ><b>姓名</b></td>
				<td ><b>工资（RMN）</b></td>
			</tr>
			<tr>
				<td rowspan="3" style="background-color: cadetblue;">华东区</td>
				<td rowspan="2" style="background-color: cadetblue;">人事专员</td>
				<td style="background-color: cadetblue;">张明</td>
				<td style="background-color: cadetblue;">1500</td>
			</tr>
			<tr style="background-color: cadetblue;">
				<!-- <td>1</td> -->
				<!-- <td><td> -->
				<td>网红</td>
				<td>1500</td>
			</tr>
			<tr style="background-color: cadetblue;">
				
			<!-- 	<td></td> -->
				<td rowspan="3">软件开发工程</td>
				<td>李开艳</td>
				<td>6000</td>
			</tr>
			<tr style="background-color: cadetblue;">
				<td rowspan="2">中南区</td>
				<td>李开元</td>
				<td>6000</td>
			</tr>
			<tr style="background-color: cadetblue;">
				
				<td>梁超</td>
				<td>5000</td>
			</tr>
			<tr style="background-color: yellow;">
				<td colspan="3">总计</td>
				<!-- <td>1</td> -->
				<!-- <td></td> -->
				<td>19000</td>
			</tr>
			
		</table>
	</body>
</html>

 6.手写实现邮箱登录，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<tr>
				<p></p>
				<td><span style="font-size: 20px;"><b>邮箱登录</b></span></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td width="50">用户名</td>
				<td><input type="text" name="" id="" value="" />@gamgw.com</td>
			</tr>
			<tr>
				<td></td>
				<td>密&nbsp;&nbsp;码</td>
				<td><input type="password" name="" id="" value="" /> 忘记密码了？</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td><input type="checkbox" name="" id="" value="" />两周内自动登录<input type="checkbox" name="" id="" value="" />SSL安全登录</td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2"><img src="img/login.gif" ></td>
				<!-- <td></td> -->
			</tr>
		</table>
	</body>
</html>

标签：6000,表格,--,单元格,商品,1500,HTML,nbsp,提例
来源： https://blog.csdn.net/qq_62881798/article/details/122292968