实现效果如图:

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

所以需要将头部用<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下什么工具可以用来纠正文件中的拼写和排版错误?

    答: ispell,官网在此

  2. 一篇文章搞懂Python装饰器所有用法

    01. 装饰器语法糖 如果你接触 Python 有一段时间了的话,想必你对 @ 符号一定不陌生了,没错 @ 符号就是装饰器的语法糖. 它放在一个函数开始定义的地方,它就像一顶帽子一样戴在这个函数的头上 ...

  3. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_14.RabbitMQ研究-与springboot整合-搭建环境

    我们选择基于Spring-Rabbit去操作RabbitMQ https://github.com/spring-projects/spring-amqp 使用spring-boot-starter- ...

  4. JAVA 基础编程练习题21 【程序 21 求阶乘】

    21 [程序 21 求阶乘] 题目:求 1+2!+3!+...+20!的和 程序分析:此程序只是把累加变成了累乘. package cskaoyan; public class cskaoyan21 ...

  5. EasyNetQ使用(三)【Publish与Subcribe】

    EasyNetQ支持的最简单的消息模式是发布/订阅.这个模式是一个极好的方法用来解耦消息提供者和消费者.消息发布者只要简单的对世界说,“这里有些事发生” 或者 “我现在有一个信息”.它不关心有没有人监 ...

  6. typing-python用于类型注解的库

    简介 动态语言的灵活性使其在做一些工具,脚本时非常方便,但是同时也给大型项目的开发带来了一些麻烦. 自python3.5开始,PEP484为python引入了类型注解(type hints),虽然在p ...

  7. 微信小程序 — 自定义picker选择器弹窗内容+textarea穿透bug

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: < ...

  8. 【计算机视觉】深度相机(四)--Realsense概览

    本文参考下文,做一点个人使用补充. http://blog.csdn.net/app_12062011/article/details/52662143 转自: http://blog.csdn. ...

  9. ffmpeg学习笔记-编译脚本

    之前已经用他人的编译脚本对ffmpeg进行了成功编译,那么在裁剪ffmpeg的时候需要指定文件,这时候应该怎么编写编译脚本呢?本文目的在于说明ffmpeg编译脚本的编写 首先在ffmpeg的目录下新建 ...

  10. SSH连接时root用户无法验证通过

    解决办法是: vi /etc/ssh/sshd_config 找到 # Authentication: PermitRootLogin without passwd 改成 # Authenticati ...