1、表格标签： border设置边框，align设置位置(居中等)，bgcolor设置背景颜色，cellspacing设置边框之间的空隙，cellpadding设置边框与里面内容的间距。 <table border="" width=" ...
1、表格标签： border设置边框，align设置位置(居中等)，bgcolor设置背景颜色，cellspacing设置边框之间的空隙，cellpadding设置边框与里面内容的间距。
<table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<tr></tr>里面也能设置相应属性，且比<table></table>优先级高。
2、跨行跨列操作
跨行：rowspan
跨列：colspan
3、下面实现网站首页显示页面（事先准备若干照片）
首先分析步骤：
1）创建一个七一列的表格
2）实现第一行（嵌套一个一行三列的表格，然后分别对单元格的内容进行填充）
3）实现第二行（暂时使用字体标签结合超链接完成导航栏，需要设置当前单元格的背景颜色为黑色）
4）实现第三行（直接放置一张广告图片）
5）实现第四行（嵌套一个三行七列的表格）
6）实现第五行（放置一张广告图片）
7）实现第六行（放置一张广告图片）
8）实现第七行（使用字体标签和超链接完成友情链接和版权信息）
然后写代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商城首页</title> 6 </head> 7 <body> 8 <!--1.创建一个八行一列的表格--> 9 <table border="1px" width="1300px" align="center" cellpadding="0px" cellspacing="0px"> 10 <!--2.logo部分--> 11 <tr> 12 <td> 13 <!--嵌套一个一行三列的表格--> 14 <table border="1px" width="100%"> 15 <tr height="50px"> 16 <td width="33.3%"> 17 <img src='/images/loading.gif' data-original="../img/logo2.png" height="47px" /> 18 </td> 19 <td width="33.3%"> 20 <img src='/images/loading.gif' data-original="../img/header.png" height="47px"/> 21 </td> 22 <td width="33.3%"> 23 <a href="#">登录</a> 24 <a href="#">注册</a> 25 <a href="#">购物车</a> 26 </td> 27 </tr> 28 </table> 29 </td> 30 </tr> 31 32 <!--3.导航栏--> 33 <tr height="50px" > 34 <td bgcolor="black"> 35 <a href="#"><font size="3" color="white">首页</font></a> 36 <a href="#"><font color="white">手机数码</font></a> 37 <a href="#"><font color="white">电脑办公</font></a> 38 <a href="#"><font color="white">鞋靴箱包</font></a> 39 <a href="#"><font color="white">家用电器</font></a> 40 </td> 41 </tr> 42 43 <!--4.轮播图--> 44 <tr> 45 <td> 46 <img src='/images/loading.gif' data-original="../img/1.jpg" width="100%" /> 47 </td> 48 </tr> 49 <!--5.最新商品--> 50 <tr> 51 <td> 52 <!--嵌套一个三行七列的表格--> 53 <table border="1px" width="100%"> 54 <tr height="50px"> 55 <td colspan="7"> 56 <font size="5">最新商品</font> 57 <img src='/images/loading.gif' data-original="../img/title2.jpg" /> 58 </td> 59 </tr> 60 61 <tr> 62 <td rowspan="2" width="190px" height="500px"> 63 <img src='/images/loading.gif' data-original="../img/big01.jpg" width="100%" height="100%"/> 64 </td> 65 66 <td colspan="3" width="555px" height="250px"> 67 <a href="#"><img src='/images/loading.gif' data-original="../img/middle01.jpg" width="100%" height="100%"/></a> 68 </td> 69 70 <td width="185px" height="250px" align="center"> 71 <a href="#"><img src='/images/loading.gif' data-original="../img/small03.jpg" /></a><br /> 72 <a href="#"><font color="gray">锅</font></a><br /><br /> 73 <font color="red">399</font> 74 </td> 75 76 <td width="185px" height="250px" align="center"> 77 <a href="#"><img src='/images/loading.gif' data-original="../img/small01.jpg" /></a><br /> 78 <a href="#"><font color="gray">榨汁机</font></a><br /><br /> 79 <font color="red">599</font> 80 </td> 81 82 <td width="185px" height="250px" align="center"> 83 <a href="#"><img src='/images/loading.gif' data-original="../img/small02.jpg" /></a><br /> 84 <a href="#"><font color="gray">电视</font></a><br /><br /> 85 <font color="red">2500</font> 86 </td> 87 </tr> 88 <tr> 89 <td width="185px" height="250px" align="center"> 90 <a href="#"><img src='/images/loading.gif' data-original="../img/small06.jpg" /></a><br /> 91 <a href="#"><font color="gray">洗衣机</font></a><br /><br /> 92 <font color="red">1800</font> 93 </td> 94 <td width="185px" height="250px" align="center"> 95 <a href="#"><img src='/images/loading.gif' data-original="../img/small08.jpg" /></a><br /> 96 <a href="#"><font color="gray">压力锅</font></a><br /><br /> 97 <font color="red">499</font> 98 </td> 99 <td width="185px" height="250px" align="center">100 <a href="#"><img src='/images/loading.gif' data-original="../img/small09.jpg" /></a><br />101 <a href="#"><font color="gray">微波炉</font></a><br /><br />102 <font color="red">499</font>103 </td>104 <td width="185px" height="250px" align="center">105 <a href="#"><img src='/images/loading.gif' data-original="../img/small07.jpg" /></a><br />106 <a href="#"><font color="gray">扫地机器人</font></a><br /><br />107 <font color="red">1500</font>108 </td>109 <td width="185px" height="250px" align="center">110 <a href="#"><img src='/images/loading.gif' data-original="../img/small04.jpg" /></a><br />111 <a href="#"><font color="gray">面包机</font></a><br /><br />112 <font color="red">800</font>113 </td>114 <td width="185px" height="250px" align="center">115 <a href="#"><img src='/images/loading.gif' data-original="../img/small05.jpg" /></a><br />116 <a href="#"><font color="gray">咖啡机</font></a><br /><br />117 <font color="red">1000</font>118 </td>119 </tr>120 </table>121 </td>122 </tr>123 124 <!--6.广告图片-->125 <tr>126 <td>127 <img src='/images/loading.gif' data-original="../img/ad.jpg" width="100%" />128 </td>129 </tr>130 131 <!--7.广告图片-->132 <tr>133 <td>134 <img src='/images/loading.gif' data-original="../img/footer.jpg" width="100%"/>135 </td>136 </tr>137 138 <!--8.友情链接和版权信息-->139 <tr>140 <td align="center">141 <a href="#"><font>关于我们</font></a>142 <a href="#"><font>联系我们</font></a>143 <a href="#"><font>招贤纳士</font></a>144 <a href="#"><font>法律声明</font></a>145 <a href="#"><font>友情链接</font></a>146 <a href="#"><font>支付方式</font></a>147 <a href="#"><font>配送方式</font></a>148 <a href="#"><font>服务声明</font></a>149 <a href="#"><font>广告声明</font></a>150 <p>151 Copyright © 2005-2016 hh商城 版权所有 152 </p>153 </td>154 </tr>155 </table>156 </body>157 </html>
在浏览器中运行，就能显示网站首页。
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：HTML基础——网站首页显示页面
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
