用表格制作商品购买页面--(table)
实现效果如图:

首先来看布局,头部图片,内容从左到右分为四个部分 勾选+商品图片+商品名/买家+价格,
所以需要将头部用<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)的更多相关文章
- table表格制作
分享一个简单的表格,代码如下: <table border=3 bordercolor=blue align=center cellspacing=3 cellpadding=6> < ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- [转]JS组件系列——表格组件神器:bootstrap table
原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...
- JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能
JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...
- 第04项目:淘淘商城(SpringMVC+Spring+Mybatis)【第九天】(商品详情页面实现)
https://pan.baidu.com/s/1bptYGAb#list/path=%2F&parentPath=%2Fsharelink389619878-229862621083040 ...
- 商品购买 & 收银台订单优化测试点疑问归纳梳理
摘要 更新内容 更新人 更新时间 初版内容 Young 2020.11.20 16:40 贾轩审查确认 Harry 2020.11.20 17:00 和林森沟通问题答疑 参与人:林森.Harry. ...
随机推荐
- MySQL中tinytext、text、mediumtext和longtext等各个类型详解
转: MySQL中tinytext.text.mediumtext和longtext等各个类型详解 2018年06月13日 08:55:24 youcijibi 阅读数 26900更多 个人分类: 每 ...
- 图像分割-Mask Scoring R-CNN
转载:https://zhuanlan.zhihu.com/p/58291808 论文链接:https://arxiv.org/abs/1903.00241 代码链接:https://github.c ...
- python封装和解构
封装 将多个值使用逗号分割,组合在一起 本质上,返回一个元组,只是省略了小括号 python的特有的语法,被很多语言学习借鉴 t1 = (1,2) #定义元组 t2 = 1,2 #将1和2封装成元组 ...
- lnmp搭建-手动版
参照链接:http://blog.csdn.net/bravemelon/article/details/64925499 centOS 下安装 Nginx yum -y groupinstall & ...
- python 操作mysql数据库(mac)包括如何处理安装MySQL-python
一.数据库的安装,https://www.jianshu.com/p/fd3aae701db9 https://jingyan.baidu.com/article/fa4125ac0e3c2 ...
- 【ABAP系列】SAP ABAP Break Point
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP Break P ...
- 自助机dmv?鸡肋
今天终于扛着懒癌去了一趟所谓的dmv自动机(dmv now kiosk),发现此机器只处理有关vehicle的三种事项,比如vehicle的new registration之类的,如果是其它事情还是得 ...
- C# volatile 摘录
C# 参考 volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化(假定由单个线程访问)的限制. 这样可以确保该字段在任何时间呈现的都是最新 ...
- Arduino基础入门篇-进入Arduino的世界
写在前面,首先是发现有网友对Arduino做了介绍,而且介绍比较清晰到位,就引用过来了. 文章出处:https://blog.csdn.net/TonyIOT/article/details/8091 ...
- 简单深入Joomla!3.1.5模块_组件开发(一)
简单深入Joomla!3.1.5模块_组件开发 主要内容: 1, 模块(访问数据库,链接到组件,数据基本流向) 2, 组件CRUD(MVC模式,访问数据库,表单提交,AJAX提交,数据基本流向) 3, ...