实现效果如图:

  首先来看布局,头部图片,内容从左到右分为四个部分   勾选+商品图片+商品名/买家+价格,

所以需要将头部用<td>包括起来,并且设置<td colspan="4">,意思是将内容设置四个列,

来看看不设置的效果:

将所有内容都挤出去了,在表格中这一标签是很重要的,

设置勾选:

<td>
     <input type="checkbox" />
</td>

如下:

设置商品图片:

<td align="center">
     <img src="img/235.jpg" />

</td>

设置商品名/买家:

这里因为有三层,所以其中需要建立一个表格包裹起来:

<td>
        <table>
            <tr>
                <td>推荐商品区</td>
             </tr>
             <tr>
                 <td>买家:ZWL</td>
               </tr>
              <tr>
                   <td>
                        <img src="img/buy.gif"/>
                         <img src="img/fav1.gif" />
                   </td>
            </tr>
         </table>

</td>

设置价格:

<td>
          一口价
     <br />
      293.56
 </td>

四个部分都完成,如下所有部分都是这样。

要注意的是表格的标签用法:

<table>

  <tr> ————独占一行

    <td></td>  ———常用来添加图片以及文字

    <th></th> ———独占一些位置,自动将字体加粗,可设置样式

  </tr>

<table>

用表格制作商品购买页面--(table)的更多相关文章

  1. table表格制作

    分享一个简单的表格,代码如下: <table border=3 bordercolor=blue align=center cellspacing=3 cellpadding=6> < ...

  2. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  3. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  4. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  5. [转]JS组件系列——表格组件神器:bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  6. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能

    JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...

  8. 第04项目:淘淘商城(SpringMVC+Spring+Mybatis)【第九天】(商品详情页面实现)

    https://pan.baidu.com/s/1bptYGAb#list/path=%2F&parentPath=%2Fsharelink389619878-229862621083040 ...

  9. 商品购买 & 收银台订单优化测试点疑问归纳梳理

    摘要 更新内容 更新人 更新时间 初版内容 Young 2020.11.20  16:40 贾轩审查确认 Harry 2020.11.20  17:00 和林森沟通问题答疑 参与人:林森.Harry. ...

随机推荐

  1. linux 中gcc的·安装、编译过程

    一.安装gcc编译器 通过命令gcc -v查看当前的GCC版本 [root@localhost /]# gcc -v Reading specs from /usr/i386-glibc-2.1-li ...

  2. Objective-C如何自己实现一个基于数组下标的属性访问模式

    在iOS6.0以及OS X10.8之后,Apple引入了一套非正式协议(informal protocol)与Objective-C语法直接绑定.当你实现了这其中的方法之后即可使用数组下标来访问属性元 ...

  3. Qt编写自定义控件35-GIF录屏控件

    一.前言 在平时的写作过程中,经常需要将一些操作动作和效果图截图成gif格式,使得涵盖的信息更全面更生动,有时候可以将整个操作过程和运行效果录制成MP4,但是文件体积比较大,而且很多网站不便于上传,基 ...

  4. [Scikit-learn] 1.5 Generalized Linear Models - SGD for Regression

    梯度下降 一.亲手实现“梯度下降” 以下内容其实就是<手动实现简单的梯度下降>. 神经网络的实践笔记,主要包括: Logistic分类函数 反向传播相关内容 Link: http://pe ...

  5. kubernetes之StatefulSet部署zk和kafka

    前提 至少需要三个node节点,否则修改亲和性配置 如果外部访问,需要自己暴露 需要有个storageClass,这样做的原因是避免手动创建pv了 部署zk和kafka 参考: https://www ...

  6. 编译bitcoin比特币客户端

    我遇到了两个不太容易解决的问题. 问题一: checking for Berkeley DB C++ headers... default configure: error: Found Berkel ...

  7. CPU密集型、IO密集型

    CPU密集型(CPU-bound) CPU密集型也叫计算密集型,指的是系统的硬盘.内存性能相对CPU要好很多,此时,系统运作大部分的状况是CPU Loading 100%,CPU要读/写I/O(硬盘/ ...

  8. 10-2 分区管理和RAID

    分区管理和RAID 处理交换文件和分区 swap交换分区是系统RAM的补充,swap 分区支持虚拟内存.当没有足够的 RAM 保存系统处理的数据时会将数据写入 swap 分区 当系统缺乏 swap 空 ...

  9. 如何做一个项目v2.ppt

    链接:https://pan.baidu.com/s/159GQsYK9BcQad3h1CyVUYg 提取码:ivcj 复制这段内容后打开百度网盘手机App,操作更方便哦

  10. linux查看端口进程占用情况

    本文介绍linux如何查看端口被哪个进程占用的方法: 1.lsof -i:端口号 2.netstat -tunlp|grep 端口号 都可以查看指定端口被哪个进程占用的情况 [步骤一]lsof -i ...