标签：6000 表格 -- 单元格 商品 1500 HTML nbsp 提例
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"> </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>密 码:</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"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> <table border="2"> <tr> <td width="25px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> </tr> </table> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> </td> <td> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> <table border="2"> <tr> <td width="25px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> </tr> </table> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </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"> <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"> <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>密 码</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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。