前端基础：通过HTML表格标签布局《餐饮菜谱》
前端基础：通过HTML表格标签布局《餐饮菜谱》
布局，是前端工作的第一步，也是前端页面能够得到展示的技术手段。对于表格式布局是简单的页面布局的基础，它是无法解决浏览器兼容性问题，因此这种布局方式一般情况下不会去使用。但是，一些移动端的布局技术思想都是来源于表格标签的布局思想，再则通过表格布局方式的了解也可以深入理解HTML表格标签的作用。
一、项目说明
该项目是进行表格式布局的一个应用案列，主要目的是让学生掌握table，tr，td等标 签，并熟练运用其中的属性。用表格布局也是网页布局的一大应用。
二、项目效果图展示
根据布局流程，首先搭建html基本结构，然后在body标签中使用HTML的表格标签table、表格标签的行标签tr、表格标签的单元格标签td来进 行布局，再把相关的元素放到相应的单元格标签里。
先看效果图如下所示。
三、搭建html基本结构
HTML基本结构在《李白诗词赏析》项目中已做介绍,代码如下。
<html><head><title>菜单</title></head><body></body>
</html>
四、表格布局行列的确定
这里布局《菜谱特别推荐》这个页面，如下图所示。
根据这个页面的特点，“特别推荐”这一行文字算作表格的其中一行，下面的具体菜谱，页面右边是整体的图片竖向堆叠，每个图片算作一行的话，大概分为四行，左边的上多半部分为菜谱的菜价列表，左边的下少半部分为一张图片。我们以左边最多的列数为参考，图片所占的两列实际上就是表格的列合并技术，可以使用HTML中的colspan属性进行列跨度的合并来解决问题，文字和文字之间的空隙可以使用width宽度来控制每个单元格td的长度，最后就是背景图和左右两边的空白，左右两边可以用
标签来使整体表格进行居中，背景图片可以在body上面采用backgroud属性添加图片，也可以在table标签上添加background属性,左右两侧的空白用td标签，再限制宽度width来实现空白的效果。
这样，实现这个页面的表格布局，根据菜谱中菜的数量和题目及“上一页”、“下一页”的点击提示一共是13行（每个菜品可以做为表格的一行），右侧的图片可以根据3个菜品行的行合并，右下角图片可以根据表格左侧两个列的列合并，这个表格布局需要多少列呢? 左右两边的留白各1列，图片占1列，菜品名1列，菜价1列，最终是5列。
这样，这个“推荐菜谱”的页面就是13行5列。
在HTML中使用<table>标签定义 HTML 表格。
在HTML的table 元素含有一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
如下面这段代码就表示产生一个一行两列的表格。
<table border="1"><tr><th>地区</th><th>景点</th></tr><tr><td>北京</td><td>天安门</td></tr>
</table>
代码中<table>标签开始时定义的属性border=1表示在页面显示时会显示出表格线，如果没有这个参数，则不显示表格线，也就是表格线的宽度为0，即border=0。<th>定义的是表头，也就是表格的开头部分,用于对一些问题的性质的归类。<tr>决定表格的行，<td>决定表格有多少列。代码放在HTML的body中，页面全部代码显示为：
<html><head><title>表格演示</title></head><body><table border="1"><tr><th>地区</th><th>景点</th></tr><tr><td>北京</td><td>天安门</td></tr></table></body>
</html>
代码最终在浏览器中的显示效果如图所示。
回到当前的项目“推荐菜谱”页面中包含了13行5列，可以在table标签中除了添加border=1显示表格线外，还可以添加background=“beijing5.png”，使表格具有背景的显示，不过背景如果需要显示出来，就需要表格的大小和背景图片的大小一致，通过右击背景图片的属性，在弹出的“图片属性”对话框中，点击“详细信息”，可以查看到背景图片的大小，如下图所示。
从图片中可知，背景图的宽为768，高为1024，这样，对table标签设置属性backgroud时，再赋给table标签width属性和height 属性，指定table标签的宽和高和背景图片的宽和高适配。
table标签的设置语句如下：
<table background="beijing5.png" width=758 height=1024 border=1>
当然，这里的border=1也是可以省略的。
下面就在table标签中添加tr行和td单元格的标签，注意13行5列不是有13个<tr>和</tr>，有5个<td>和</td>，而是13个<tr>和</tr>>，在每个<tr>标签中都包含有5个<td>单元格标签，也就是整个表格由13行和5列组成的，有多少个单元格就有多少个td，每个td被tr去平均分配到各行中去。代码如下。
<html><head><title>表格演示</title></head><body><table background="beijing5.png" width=758 height=1024 border=1><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></table></body>
</html>
上述代码在浏览器中的显示结果如下图所示。
五、表格布局行或列的合并
通过确定表格的行和列就可以实现一个标准的表格，但是在布局页面时，就像“菜谱特别推荐”，题目是需要表格最上面一行进行所有的列合并，题目显示在中间，可以用<center>标签来居中，在HTML中，列合并相当于列跨度的概念，就是一个列要跨多少个单元格，用colspan来进行列跨度的设置，colspan用来指定单元格横向跨越的列数，也就是说colspan是合并列的，colspan=2 表示横向合并两列。“菜谱特别推荐”第一行的<tr>里有5个td标签，左右的各一个td表示的是留白，中间3个td可以进行列跨度，这样可以设置colspan=3，在单元格中显示“特别推荐”4个字，有一定的字号和大小，可以使用<h1>标签定义成一级标题。再用<center>标签包住<h1>一级标题，使“特别推荐”标题可以居中显示。设置后的第一行tr代码语句如下：
<tr height="100"><td></td><td colspan=3><center><h1>特别推荐</h1></center></td><td></td>
</tr>
代码中<tr>标签开始时加入height，可以限定单元格的高度，不会使表格变形。
浏览器中的效果如下图所示。
最下面的单元格也需要单元格的合并，左右两边<td>做为留白，中间的三个单元格<td>做colsan的列跨度，其值为3，标签包含的内容有“上一页”和“下一页”的链接，链接是使用HTML中的a标签，标签<a>起到定义超链接的作用，用于从一个页面链接到另一个页面。也就是可以通过<a>标签实现点击其包含的文字就把网站加载了另外一个页面。在<a>标签中最重要的属性是 href 属性，它指定链接的目标。格式如下:
<a href=”http://www.baidu.com”>链接到百度</a>
这里的“特别推荐”页面底部有“上一页”，“下一页”可以链接到当前“特别推荐菜谱”的前一页和后一页。对应的<tr>代码语句如下。
<tr height=100><td></td><td colspan=3><a href="previous.html">上一页</a><a href="next.html">下一页</a></td><td></td>
</tr>
代码中<tr>标签开始时加入height，可以限定单元格的高度，不会使表格变形。<tr>中的<center>标签决定“上一页”和“下一页”显示的居中，<center>标签中的两个<a>标签分别完成点击“上一页”链接到“previous.html”页面，点击“下一页”链接到“next.html”页面。
浏览器中的效果如下图所示。
再来看页面“特别推荐”右边的图片列可以这样处理，第一个图片格4个单元格进行竖向合并，后面的两个图片每3个单元格进行竖向合并，对于行合并使用rowspan，rowspan 属性规定单元格可横跨的行数。某一个<td>单元格设置了rowspan=2,表示其单元格可横跨两行，后面一行被横跨的td标签就会被去掉。如下面的代码：
<table border="1"><tr><td rowspan="2">星期</td><td>星期二</td></tr><tr><td>星期三</td></tr>
</table>
这段代码有两个<tr>标签，每个<tr>标签内包含两个<td>，显然应该是两行两列，但第一个<tr>标签中<td>标签有属性rowspan=2，起到了横跨两行，后面被横跨的<td>标签就被去掉了，这样在第二个<tr>标签中就只有一个<td>标签了。显示效果如下图所示。
把rowspan应用到“特别推荐”右边的一列后，还剩下一个<td>单元格为单独插入图片，剩下单元格的左边两列可以进行列合并，插入一张图片，如果图片太大，可以设定图片的width和height属性指定图片的宽和高。这样，除题目和脚部链接中间的部分表格经合并填入对应图片后的代码如下如示。
<tr><td></td><td></td><td></td><td rowspan=4><img src="青萝卜素丸子.png" width=200 height=200/></td><td></td>
</tr>
<tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr>
<tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr>
<tr><td></td><td></td><td></td><!--<td></td>--><td></td>
</tr>
<tr><td></td><td></td><td></td><td rowspan=3><img src="清蒸鲈鱼.png" width=200 height=200/></td><td></td>
</tr>
<tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr>
<tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr>
<tr><td></td><td></td><td></td><td rowspan=3><img src="清蒸鱼.png" width=200 height=200/></td><td></td>
</tr>
<tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr>
<tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr>
这段代码中被语句“<!--<td></td>-->”注释的部分，就是经过行合并rowspan或列合并colspan处理后被去掉的单元格标签<td>。
将题目、脚部导航和中间的图片表格合并后的总体代码如下。
<html><head><title>菜谱特别推荐</title></head><body><table background="beijing5.png" width=758 height=1024 border=1><tr height="100"><td></td><td colspan=3><center><h1>特别推荐</h1></center></td><td></td></tr><tr><td></td><td></td><td></td><td rowspan=4><img src="青萝卜素丸子.png" width=200 height=200/></td><td></td></tr><tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr><tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr><tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr><tr><td></td><td></td><td></td><td rowspan=3><img src="清蒸鲈鱼.png" width=200 height=200/></td><td></td></tr><tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr><tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr><tr><td></td><td></td><td></td><td rowspan=3><img src="清蒸鱼.png" width=200 height=200/></td><td></td></tr><tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr><tr><td></td><td></td><td></td><!--<td></td>--><td></td></tr><tr><td></td><td colspan=2><img src="酸菜鱼.png" width=200 height=200/></td><!--<td></td>--><td><img src="水煮鱼.png" width=200 height=200/></td><td></td></tr><tr height=100><td></td><td colspan=3><center><a href="previous.html">上一页</a><a href="next.html">下一页</a></center></td><td></td></tr></table></body>
</html>
代码在浏览器中的显示效果如图所示。
最后在空白的格内输入菜品的名称和菜品的价格。对宽度不合宜的<td>单元格标签可以设置width来限定。代码如下。
<html><head><title>菜谱特别推荐</title></head><body><table background="beijing5.png" width=758 height=1024 border=1><tr height="100"><td></td><td colspan=3><center><h1>特别推荐</h1></center></td><td></td></tr><tr><td width=100></td><td width=200>烤 全 兔</td><td width=100>45元</td><td rowspan=4><img src="青萝卜素丸子.png" width=200 height=200/></td><td width=100></td></tr><tr><td></td><td>香辣鸡软骨</td><td>38元</td><!--<td></td>--><td></td></tr><tr><td></td><td>毛 血 旺</td><td>38元</td><!--<td></td>--><td></td></tr><tr><td></td><td>水 煮 鱼</td><td>38元</td><!--<td></td>--><td></td></tr><tr><td></td><td>干爹爆肥肠</td><td>30元</td><td rowspan=3><img src="清蒸鲈鱼.png" width=200 height=200/></td><td></td></tr><tr><td></td><td>香 辣 鸡 胗</td><td>30元</td><!--<td></td>--><td></td></tr><tr><td></td><td>腊八粥五花肉</td><td>25元</td><!--<td></td>--><td></td></tr><tr><td></td><td>全 醋 肥 牛</td><td>20元</td><td rowspan=3><img src="清蒸鱼.png" width=200 height=200/></td><td></td></tr><tr><td></td><td>板菜肉松四季豆</td><td>16元</td><!--<td></td>--><td></td></tr><tr><td></td><td>烂糊白菜</td><td>12元</td><!--<td></td>-->td></td></tr><tr><td></td><td colspan=2><img src="酸菜鱼.png" width=200 height=200/></td><!--<td></td>--><td><img src="水煮鱼.png" width=200 height=200/></td><td></td></tr><tr height=100><td></td><td colspan=3><center><a href="previous.html">上一页</a><a href="next.html">下一页</a></center></td><td></td></tr></table></body>
</html>
在浏览器中打开这段代码对应的html文件的效果图如下所示。
从图中显示有表格线，把标签开始的broder=1属性去掉就实现了页面的布局效果。
代码的github地址：https://github.com/wawacode/caipu_buju
前端基础：通过HTML表格标签布局《餐饮菜谱》相关推荐
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- 【前端基础】表单标签/提交
[前端基础]表单标签/提交 表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结 表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码 小结 表单标签 学习目标 能够知道表 ...
- 【Web前端】HTML—4.表格标签
一.表格的主要作用 表格主要用于显示.展示数据,可以让数据显示的非常规整,有条理,可读性非常好.特别是后台展示数据时候,能够熟练运用表格就显得很重要. 即:表格不是用来布局页面的,而是用来展示数据的. ...
- 前端基础-html-水平线标签
<!-- 水平线标签 场景:分隔不同主题内容的水平线 代码:<hr> 语义:主题的分割转换 特点:单标签 在页面中显示一条水平线 --> <h1>前段基础</ ...
- 前端基础知识学习总结--百分比布局、Flex布局
#博学谷IT学习技术支持# 一.百分比布局:能够使用百分比布局开发网页.百分比布局, 也叫流式布局 .效果: 宽度自适应,高度固定. 二.Flex布局:能够使用Flex布局模型灵活.快速的开发网页 F ...
- 前端基础之《HTML5标签》
一.格式标签 br 换行,单标签 nobr 不换行,双标签(避免到浏览器边界自动换行) p 段落,align属性:left|center|right center 大面积居中 pre 按源代码显示 u ...
- 前端基础-html-文本格式化标签
<!-- 文本格式化标签的介绍 场景: 需要让文字加粗.下划线.倾斜.删除等效果 代码: b 加粗 strong 加粗 u 下划线 ins 下划 ...
- 前端基础7：a标签常用方法和元素居中方式，响应式@media
a标签 a标签作用 锚点 语法:href="#+指定位置" a标签href属性的属性值为相应要跳转到的元素id属性名前加# <a href="#top"& ...
- web前端基础（08html5新标签）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
最新文章
- CRM中Plugin开发如何将功能放入多个模块
- Android AdapterView 源码分析以及其相关回收机制的分析
- zblog php搜索页面,Z-Blog PHP实现搜索分页
- 在MySQL中当有多个索引时 你知道MySQL是如何选择索引的吗 ？？？
- JSP页面处理和输出
- 计算机组成白中英答案,计算机组成原理白中英答案
- sql基本语句返回值类型
- 搞定所有的跨域请求问题 : jsonp CORS
- 专访全面智能CTO陈章：想法只有在技术落地的那一刻才有撬动地球的能力
- si4463 WDS配置参数详解
- Emscripten 单词_人教版英语七年级下册单词、课文及音频汇总
- pptpd 安装步骤
- php中``反引号的作用
- 将镭神C32激光雷达的PointXYZ数据转化为PointXYZIR格式 - 附代码
- 其实，APP文案还可以这样写·····
- 20出头的人该怎么护肤？
- DeFi基本概念-开发人员必看
- 扯淡 | 如何判断一家公司是否靠谱
- PHP+MYSQL实现简单的用户注册登录功能
- Java排序算法——选择排序