前端基础：通过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">
html href属性<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>
<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>
上述代码在浏览器中的显⽰结果如下图所⽰。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论