首页 > 代码库 > 只用table模仿一个静态页面
只用table模仿一个静态页面
尝试只用table标签来模仿一个静态页面，这样做可以很好的增加对网页结构理解。
要尝试模仿的页面如下：
附上我自己写的代码，因为只是用了HTML，没有用到CSS和js，所以有些样式写出来和原图有些出入
<!DOCTYPE html> <html> <head> <title>只用table来模仿一个网页</title> <meta charset="utf-8"> </head> <body> <!-- 需要注意代码的可读性，即要对齐；其次是注意语义化 --> <!-- 先暂时把border设置为“1”，这样有利于观察显示效果，在最后需要把它设置为“0” --> <!-- 把整个网页设置为两个表格，第一个表格用来放置页首图，第二个表格用来放置网页内容 --> <!-- 第二个表格有多个大的行，要做好标记 --> <table><!-- the first table,放置页首图片 --> <tr> <td> <img src="./img/images/目标_01.gif" title="页首" alt="我们的联系方式"> </td> </tr> </table> <table border="0" style="margin:0 auto;" width="960px"> <!-- the second table --> <tr><!-- 第1大行 --> <!-- 第1大行里面需要再嵌套一个表格，这个表格有1行，5列 --> <td ><!-- 这个表格只能嵌套在<td>里面 --> <table border="0" width="600px" height="80px" style="margin-left:195;"> <!-- ???如何让这个表格距离窗口左侧195px --> <tr> <td align="center"><a href="">首页</a></td> <td align="center"><a href="">关于利牛</a></td> <td align="center"><a href="">行业资讯</a></td> <td align="center"><a href="">主要业务</a></td> <td align="center"><a href="">安全保障</a></td> </tr> </table> </td> </tr> <tr><!-- 第2大行 --> <td> <img src="./img/images/目标_04.gif"> </td> </tr> <tr><!-- 第3大行 --> <td height="42px"> </td> </tr> <tr><!-- 第4大行 --> <td><!-- 这一行需要再嵌套一个表格 --> <table border="0" ><!-- 这个表格有1行6列，放入图片和文字 --> <tr> <td> <img src="./img/images/目标_08.gif"> </td> <td width="280px"> <h3>稳定高收益</h3> <p>40倍银行活期存款利息<br>100元起投，交易0手续费</p> </td> <td> <img src="./img/images/目标_10.gif"> </td> <td width="255px"> <h3>安全严保障</h3> <p>本息保障、风控审核贷<br>后管理</p> </td> <td> <img src="./img/images/目标_12.gif"> </td> <td width="172px"> <h3>便捷优服务</h3> <p>24小时放款，提前还款减免费用</p> </td> </tr> </table> </td> </tr> <tr><!-- 第5大行 --> <td height="140px"> <p align="center"><strong>主要业务</strong>/ PRODUCTS SERVICES</p> </td> </tr> <tr><!-- 第6大行,这一行内嵌1个表，表分为4列3行 --> <td> <table> <tr> <td><img src="./img/images/目标_17.gif"></td> <td><img src="./img/images/目标_19.gif"></td> <td><img src="./img/images/目标_21.gif"></td> <td><img src="./img/images/目标_23.gif"></td> </tr> <tr> <td> <h3 style="color: red">投资业务</h3> <p>证券投资业务，指银行购买有价证券的活动。</p> </td> <td> <h3 style="color: red">理财增值</h3> <p>通过发行基金单位，集中投资者的资用金，由基金管理人管理和运基金。</p> </td> <td> <h3 style="color: red">信托服务</h3> <p>信托服务建立了以项目为中心，以风险贯穿其间的业务运作平台。</p> </td> <td> <h3 style="color: red">产品代理</h3> <p>通过代理的形式，推广和买卖产品是产品的一种交易和流通方式。</p> </td> </tr> <tr> <td><img src="./img/images/立即咨询.jpg"></td> <td><img src="./img/images/立即咨询.jpg"></td> <td><img src="./img/images/立即咨询.jpg"></td> <td><img src="./img/images/立即咨询.jpg"></td> </tr> </table> </td> </tr> <tr height="60px"></tr><!-- 第7大行，设置行高为70px--> <tr><!-- 第8大行--> <td> <img src="./img/images/目标_29.gif"> </td> </tr> <tr><!-- 第9大行,设置行高为60px--> <td height="70px"> </td> </tr> <tr ><!-- 第10大行，在这一行里嵌套一个表，这个表分为两列，左侧一列再嵌套一个表，放置图片。右侧一列嵌套一个表，放置右侧的内容--> <td> <table > <tr> <td> <table border="0" ><!-- 这个是左侧的table --> <tr> <td colspan="2" > <h3>新闻资讯/ NEWS</h3> </td> </tr> <tr> <td align="center"><img src="./img/images/目标_39.gif"></td> <td align="center"><img src="./img/images/目标_41.gif"></td> </tr> <tr> <td> <ul> <li><p>证监会：分级基金投资者门...<br>2016-11-29</p></li> <li><p>两市震荡下行 次新股板块...<br>2016-11-29</p></li> <li><p>机场民航板块起飞 上海机...<br>2016-11-29</p></li> <li><p>人民币汇率有条件保持基本...<br>2016-11-29</p></li> </ul> </td> <td> <ul> <li><p>年关将至，4件大事发生将...<br>2016-11-29</p></li> <li><p>投资理财5个地方该花的钱...<br>2016-11-29</p></li> <li><p>关于年终奖的这些秘密...<br>2016-11-29</p></li> <li><p>活用理财小公式让财富轻...<br>2016-11-29</p></li> </ul> </td> </tr> </table> </td> <td> <table border="0"><!-- 这是右边的table，分为9行1列 --> <tr> <td><h3>常见问题 / Q&A</h3></td> </tr> <tr> <td><!-- 为了让图片和文字处于同一列，在此处又嵌套了一个table，但这是一种低效的方法，有更好的吗？ --> <table> <tr> <td> <img src="./img/images/目标_46.gif"> </td> <td> <p>个人征信记录要注重哪些？</p> </td> </tr> </table> </td> </tr> <tr> <td> <table> <tr> <td> <img src="./img/images/目标_49.gif"> </td> <td> <p>个人信息：姓名、证件类型证件号码。</p> </td> </tr> </table> </td> </tr> <tr align="center"> <td> <img src="./img/images/目标_52.gif"> </td> </tr> <tr> <td> <table> <tr > <td> <img src="./img/images/目标_46.gif"> </td> <td> <p>银行理财产品该如何选？</p> </td> </tr> </table> </td> </tr> <tr> <td> <table> <tr height="35px"> <td> <img src="./img/images/目标_49.gif"> </td> <td> <p>现在各大银行都推出了琳琅满目的理财产品，我们该如何选。</p> </td> </tr> </table> </td> </tr> <tr align="center"> <td> <img src="./img/images/目标_52.gif"> </td> </tr> <tr> <td><!-- 为了让图片和文字处于同一列，在此处又嵌套了一个table，但这是一种低效的方法，有更好的吗？ --> <table> <tr> <td> <img src="./img/images/目标_46.gif"> </td> <td> <p>个人消费贷款如何办理？</p> </td> </tr> </table> </td> </tr> <tr> <td> <table> <tr> <td> <img src="./img/images/目标_49.gif"> </td> <td> <p>个人消费贷款也叫消费者贷款，是银行以消费者信用为基础。</p> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr><!-- 第11大行，放置合作机构的logo --> <td> <img src="./img/images/目标_50.gif"> </td> </tr> <tr><!-- 联系我们，客服热线 --> <td> <table> <tr> <td height="236px" width="380px"> <h3>联系我们</h3> <p>地址：广州市海珠区苏州街18号F栋3单元3A02</p> <p>邮编：510000</p> <p>邮件：2383003879@qq.com</p> </td> <td width="338px"> <h3>客服热线</h3> <P>18825039863</P> <p>（工作时间 9:00-21:00）</p> <img src="./img/images/目标_53.gif"> </td> <td width="144px" align="ce"> <h3>商家服务</h3> <P> 商家入驻<br> 培训中心<br> 广告服务<br> 服务市场<br> </p> </td> <td width="286px" align="center"> <h3>帮助信息</h3> <P> 帮助中心<br> 赎回投资<br> 新手指引<br> 安全保障<br> </p> </td> </tr> </table> </td> </tr> <tr ><!-- 利牛金融有限公司 版权所有 --> <td align="center"> <p>?2016 利牛金融有限公司 版权所有</p> <p>本站使用凡科建站搭建</p> </td> </tr> </table> </body> </html>
把上面的代码用浏览器打开之后的效果是这样的：
等学了css之后再调整一下。
只用table模仿一个静态页面
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。