HTML5 Table 布局实现 商品列表

 运行结果如上。。。。

下面说说设计过程:

一开始试探的做的时候,是建立了一个table,这个table里面放一本图书的信息。然后建立了一个列,然后建立了个td,td里面放图片,td那个表格多占几列,然后再建一个tr放图书信息,这样做了之后发现,tr那一列直接放到图书下面去了,然后很懵逼,然后调整表格的宽度,高度,表格的占列数啥的,然后发现还是不行,然后问了问小组长,发现表格中嵌入图片之后,表格的默认高度已经确认下来了,然后想了想,决定再开一个td,在td中再建立一个table,再在table中写书的介绍啥的,这样做确实出现在了图书的右面了,但是发现写出的介绍居中,然后发现调用td中的valign属性就可以实现介绍自上而下排列。

然后设置table中的tr中的td的width来实现对表格宽度的控制。然后发现了一个问题,发现各个表格的宽度是以各个列中最长的表格宽度决定的。因此,在写比较长的文字介绍时,需要新建一个table,重新设置宽度来实现页面布局的合理性。写购买和收藏的时候也是新建了个table,为了两个表格间有空隙,想了些馊主意,一个是将一个表格设的长一些,这样看起来有缝隙,另一个是直接新建一个空的表格,设置宽度,反正都是很馊的主意...

然后在那个表格加上了个随便的超链接...

然后按照上面的方法建立了6个表格,然后发现并不居中,想让它们都居中,然后发现单个设不行,然后请教了下别人,然后发现还要建一个大的table,table里面有6个表格,然后那个大table 设为居中,就可以实现居中了...合的时候想在原来的文件上合,然后合着合着就迷糊了,只好又新建了一个文件,先建了一个大table,然后再将6个表格合进去...

最后终于是合完了...

总结:

建网页的时候一定要将整体布局先想好,不要写一点想一点。。。

做不出来的原因还是由于自己的基础知识掌握的不行,还有就是不会灵活变通,太死板。。。

Table中的border在做的表格的时候不置0真的很重要,能很快的找出问题所在。。。

参考代码:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当当网</title>
</head>
<body>
<table align="center" border="0">
  <tr>
    <td>
      <table border="0">
        <tr>
          <td><img src="24003581-1_b_5.jpg"></td>
          <td valign="top">
            <table border="0">
              <tr>
                <td width="250"><font color="blue">HTML CSS JavaScript基础教程 </font></td>
                <td width="100"><font color="#dc143c">Web前端开发</font></td>
                <td width="350"><font color="blue">web前端开发教程 讲透HTML5 H5 CSS3 JS核心</font></td>
              </tr>
              <tr valign="top">
                <td ><font color="#dc143c" size="5">现价 48.60</font> <font color="#a9a9a9" size="1">定价: </font><SPAN style="TEXT-DECORATION: line-through">69.00</SPAN><font color="#a9a9a9" size="1">(7.05折) </font></td>
              </tr>
              <tr>
                <td ><font color="blue">就是我</font><font color="#a9a9a9">/2017-08-01/</font><font color="blue">人民邮电出版社</font></td>
              </tr>
              <tr>
                <td><font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;666评论</font></td>
              </tr>
              <tr>
                <td><img src="hot1.png"></td>
              </tr>
              <table border="0" width="725">
                <tr>
                  <td>初学入门 入门经典 针对前端新手全面打造,一本书搞定HTML CSS JavaScript 精品呈现 通俗易懂 语言轻松幽默 讲解亦真见血 全角度剖析开发核心技术</td>
                </tr>
              </table>
              <table border="0">
                <tr>
                  <!--<td bgcolor="#dc143c" width="120" align="center"><font color="#f0ffff">加入购物车</font></td>-->
                  <td bgcolor="#dc143c" align="center" width="80"><a href="http://product.dangdang.com/25160597.html" >购买</a></td>
                  <td width="25"></td>
                  <td bgcolor="#ffb6c1" width="80" align="center"><font color="#dc143c">收藏</font></td>
                </tr>
              </table>
              </td>
              </tr>
            </table>
    </td>
  </tr>
  <!--2-->
  <tr>
    <td>
      <table border="0">
        <tr>
          <td><img src="25108304-1_b_5.jpg"></td>
          <td valign="top">
            <table border="0">
              <tr>
                <td width="350" ><font color="#dc143c">Web前端开发</font><font color="blue">实例教程--HTML5+CSS3+JavaScript</font></td>
              </tr>
              <tr>
                <td><font color="#dc143c" size="5">现价: 31.40 </font><font color="#a9a9a9" size="3">定价: </font><SPAN style="TEXT-DECORATION: line-through">39.80</SPAN><font color="#a9a9a9" size="1">(7.89折)</font></td>
              </tr>
              <tr>
                <td ><font color="blue" size="3">我就是 </font><font color="#a9a9a9" size="2">等主编 /2017-09-01/</font><font color="blue" size="3">电子工业出版社</font></td>
              </tr>
              <tr>
                <td><font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;123评论</font></td>
              </tr>
              <tr>
                <td><img src="QQ截图20181020153425.png"></td>
              </tr>
              <tr height="60"><td></td></tr>
            </table>
            <table border="0" valign="bottom">
              <tr>
                <td bgcolor="red" width="80" align="center"><a href="http://product.dangdang.com/25168143.html" >购买</a></td>
                <td width="25"></td>
                <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
<!--3-->
  <tr>
    <td>
      <table border="0">
        <tr>
          <td><img src="410260224-1_b_3.jpg"></td>
          <td valign="top">
            <table border="0">
              <tr>
                <td width="580"><font color="blue" size="3">移动</font><font color="red" size="3">Web前端</font><font color="blue" size="3">高效</font>
                  <font color="red" size="3">开发</font><font color="blue" size="3">实战: HTML5+CSS3+JavaScript+Webpack+ReactNative+Vue</font></td>
              </tr>
              <tr>
                <td><font color="red" size="5">现价: 59.21</font></td>
              </tr>
              <tr>
                <td><font color="blue" size="2"> iKcamp </font><font color="#a9a9a9" size="2">/2017-09-01/</font><font color="blue" size="2">电子工业出版社</font></td>
              </tr>
              <tr>
                <td><font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0评论</font></td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td><img src="QQ截图20181020153425.png"><img src="电子书.png"><img src="满2件6折.png"></td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td width="580"><font>移动Web前端高效实战 HTML5 CSS3 JavaScript Webpack React Native Vue.js Node.js梳理了移动前端和Native客户端技术体系
                  涵盖了移动Web前端各个关键技术环节。</font></td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td bgcolor="red" width="80" align="center"><a href="http://e.dangdang.com/products/1901084153.html" >购买</a></td>
                <td width="25"></td>
                <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
<!--4-->
  <tr>
    <td>
      <table border="0">
        <tr>
          <td><img src="410260226-1_b_2.jpg"></td>
          <td valign="top">
            <table border="0">
              <tr>
                <td width="800"><font color="red" size="3">Web前端开发</font><font color="blue" size="3">从学到用完美实践--HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJ
                  著名前端大牛阮晓老师力荐</font></td>
              </tr>
              <tr>
                <td><font size="5" color="red">现价: 69.50&nbsp;&nbsp;</font><font color="#a9a9a9" size="2">定价: </font><SPAN style="TEXT-DECORATION: line-through">39.80</SPAN><font color="#a9a9a9" size="2">(7.9折)</font></td>
              </tr>
              <tr>
                <td><font color="blue" size="2">阮晓龙 </font><font color="#a9a9a9" size="2">著/2018-08-23/</font><font color="blue" size="2">水利水电出版社</font></td>
              </tr>
              <tr>
                <td><font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0评论</font></td>
              </tr>
              <tr>
                <td><img src="QQ截图20181020153425.png"></td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td width="800">货真料足:著名一线前端开发专家阮晓龙老师多年学习,研究,授课及实战经验的结晶 内容系统全面:一站式解决HTML5 CSS3 JavaScript jQuery
                  AJAX AngularJS 学习</td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td bgcolor="red" width="80" align="center"><a href="http://e.dangdang.com/products/1901084153.html" >购买</a></td>
                <td width="25"></td>
                <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
<!--5-->
  <tr>
    <td>
      <table border="0">
        <tr>
          <td><img src="25160597-1_b_3.jpg"></td>
          <td valign="top">
            <table border="0">
              <tr>
                <td width="600"><font color="red" size="3">web前端</font><font color="blue" size="3">基础</font><font color="red" size="3">开发</font>
                  <font color="blue" size="3">秘籍: HTML5 CSS3 JavaScript Dreamweaver CC网页设计与制作</font></td>
              </tr>
              <tr>
                <td><font color="red" size="5">现价: 79.80&nbsp;&nbsp;</font><font color="#a9a9a9" size="2"> 定价:</font>
                  <SPAN style="TEXT-DECORATION: line-through">159.60</SPAN><font color="#a9a9a9" size="2">(5折)</font></td>
              </tr>
              <tr>
                <td><font color="blue" size="2">未来科技 </font><font color="#a9a9a9" size="2">/2017-08-31</font></td>
              </tr>
              <tr>
                <td><font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;32评论</font></td>
              </tr>
              <tr>
                <td><img src="QQ截图20181020153425.png"><font>&nbsp;&nbsp;</font><img src="限时抢.png"></td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td width="600">10万 读者检验,畅销书全面升级;10年开发教学经验,一线讲师半生心血。同属于HTML CSS JavaScript HTML5移动开发
                  HTML5实战 HTML5 APP</td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td bgcolor="red" width="80" align="center"><a href="http://product.dangdang.com/410260225.html" >购买</a></td>
                <td width="25"></td>
                <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
<!--6-->
  <tr>
    <td>
      <table border="0">
        <tr>
          <td><img src="1312533142-1_b_14.jpg"></td>
          <td valign="top">
            <table border="0">
              <tr>
                <td width="700"><font color="blue" size="3">HTML5 Canvas开发详解 &nbsp;</font><font color="red" size="3">Web前端开发</font>
                  <font color="blue" size="3">精品课全彩印刷! &nbsp;全面透彻介绍HTML5 &nbsp;Canvas开发核心知识</font></td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td width="300"><font color="red" size="5">现价:&nbsp;56.80&nbsp;&nbsp;</font><font color="#a9a9a9"size="2">定价:</font>
                  <SPAN style="TEXT-DECORATION: line-through">79.00</SPAN><font color="#a9a9a9" size="2">(7.19折)&nbsp;&nbsp;</font></td>
                <td bgcolor="#4169e1" width="100" align="center"><font color="white" size="5">电子书:</font></td>
                <td><font color="blue" size="5"> 50.56</font></td>
              </tr>
              <tr>
                <td><font color="blue" size="2">莫振杰</font><font color="#a9a9a9" size="2">/2017-03-01/</font><font color="blue" size="2">人民邮电出版社</font></td>
              </tr>
              <tr>
                <td><font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;278评论</font></td>
              </tr>
              <tr>
                <td><img src="QQ截图20181020153425.png"></td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td width="650">含金量高 前端精品内容荟萃,强化基础提升实战技能。 通俗易懂 语言风格轻松幽默,形象生动讲解枯燥知识。 系统学习 掌握前端高级技巧,
                  清晰流畅学习进阶内容。</td>
              </tr>
            </table>
            <table border="0">
              <tr>
                <td bgcolor="red" width="100" align="center"><a href="http://product.dangdang.com/25065629.html">购买纸质书</a></td>
                <td width="25"></td>
                <td bgcolor="red" width="100" align="center"><a href="http://e.dangdang.com/products/1900783222.html">购买电子书</a></td>
                <td width="25"></td>
                <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

 

  • 9
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值