本文主要是介绍HTML 图像 表格 图像映射 实际应用-菜谱、课程表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
html图片、表格显示实例代码：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 第三讲代码 </title>
</head><body>图片：<br>
<!--打开一张图片，src 指 "source"即源属性 值是图像的 URL 地址，图片既可以是本地图片也可以是外网图片-->
<img src = "图片1.jpg" />
<!--按照规定的像素打开一张图片-->
<img src = "图片1.jpg" width="300px" height = "300px"/>
<!----><!--alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
-->
<img src = "图片1.jpg" width="300px" height = "300px" alt = "这是一张图片" />
<!--border属性是给打开的图片加相框，其后属性值是相框的宽带-->
<img src = "图片1.jpg" width="300px" height = "300px" border = "4"/>
<!--设定相框的宽带和颜色-->
<img src = "图片1.jpg" width="300px" height = "300px" style="border:4px solid red" /><!--打开外网图片-->
<img src = "http://d.pcs.baidu.com/thumbnail/c07eb801aa9d36000dc8de951ca71d01?fid=136084341-250528-278231926921786&time=1427014800&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-KAaIL5eeD%2Fa82Qw9k7kv7pUhaTo%3D&rt=sh&expires=2h&r=735636236&sharesign=unknown&size=c710_u500&quality=100" width="300px" height = "300px" style="border:4px solid red" /><br><br><br>
**********************************************************************************************************************************************<br>
表格：<br><!--<table> 标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格-->
<!--border属性给表格加框，1px表示边框宽度为1像素-->
<!--width属性控制单元格左右宽度，可用像素表示，也可用百分比表示（占整个屏幕宽度百分比）-->
<!--height属性控制单元格上下高度，可用像素表示，也可用百分比表示（占整个屏幕宽度百分比）-->
<!--align属性确定表格在屏幕上的位置，位置有 left,center,right三个选项-->
<!--bgcolor属性确定表格背景颜色，可控制整个表格，也可只控制一行或一列-->
<table border = "3px" width = "50%" height = "100px" align = "center" bgcolor = "yellow"><!--<tr> 标签定义表格中的行。-->
<!--align属性写在table标记中可确定整个表格在屏幕上的位置；align属性写在tr标记中可确定表中一行数据在单元格中的位置；align属性写在td标记中可确定表中某行数据的某一列数据在单元格中的位置
-->
<tr align = "left">
<!--<td> 标签定义表格中的一个单元格。也就是列-->
<td ><font size = "6">
<b>
11
</b></font>
</td >
<td>
12
</td>
<td>
13
</td>
</tr>
<tr align = "center" bgcolor = "red">
<td align = "center">
21
</td>
<td>
22
</td>
<td>
23
</td>
</tr>
<tr align = "right" bgcolor = "green">
<td>
32
</td>
<td>
32
</td>
<td>
33
</td>
</tr>
</table><br>
*********************************************************************************************************************************<br><br>
菜单表格练习：<br><br><img src = "第三讲菜单表格练习.png" width="300px" height = "300px" alt = "练习用图片" /><br><br>编写结果如下表所示：<br><br>
<!--cellspacing属性表示单元格间距(表格间距)代表表格边框与单元格补白的距离,也是单元格补白之间的距离-->
<!--cellpadding属性表示单元格内部数据与单元格内框之间的距离-->
<!--bordercolor属性控制表格边框颜色-->
<!--background属性为表格设置背景图片-->
<table border = "1px" width = "30%" align = "center" bordercolor="red" cellspacing="0px" cellpadding="10px" background = "图片2.jpg" >
<tr align = "center">
<!--colspan属性表示合并列单元格，属性值是几就表示该列跨多少列-->
<td colspan="3"> 星期一菜谱</td>
</tr>
<tr>
<!--rowspan属性表示合并行单元格，属性值是几就表示该列跨多少行-->
<td rowspan="2">素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td></tr>
<tr>
<td>小葱豆腐</td>
<td>炒白菜</td></tr>
<tr>
<td rowspan="2">荤菜</td>
<td>油焖大虾</td>
<td>海参鱼翅</td></tr>
<tr>
<td><img src = "第三讲菜单表格练习.png" width="100px" height = "100px" alt = "练习用图片" /><br> 红烧肉</td>
<td>烤全羊</td></tr></table></body></html>课程表表格编写：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 课程表 </title></head>
<body>
<h3 align = "center">课程表<h3><table border = "1px" width = "50%" align = "center" bordercolor = "#2894FF" >
<tr align = "center">
<!--<th> 标签定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体,当需要粗体显示的列时，可用th代替td。-->
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">休息</th>
</tr>
<tr align = "center">
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="4" align = "center">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td>化学</td>
<td rowspan="4" align = "center">休息</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>
<td>计算机</td>
</tr>
<tr >
<td>化学</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>地理</td>
<td >生物</td>
</tr><!--对于某一个行间距较大问题，可在中间写一个空行，这样行间距就会变大-->
<tr>
</tr><tr >
<td rowspan="2" align = "center" >下午</td>
<td>语文</td>
<td>数学</td>
<td>化学</td>
<td>生物</td>
<td>英语</td>
<td>计算机</td>
<td rowspan="2" align = "center">休息</td>
</tr>
<tr>
<td>物理</td>
<td>英语</td>
<td>地理</td>
<td>生物</td>
<td>化学</td>
<td>语文</td>
</tr></table>
</body>
</html><html>
<head>
<title>客户端图像映射图</title>
</head>
<!--作图行映射时，必须要理解坐标体系(x轴)
(0,0) —————————————————————————————>大|||||||||||
（y轴）||\/大（正数）
作映射前，要先根据坐标体系，量出做映射图像对应的坐标
-->
<body>
<!--给图片起一个名字usemap，一定要以#开头，但#不属于名字的一部分-->
<img src="映射图.png" usemap="#face">
<!--map内部为映射区域-->
<map name="face">
<!--对矩形区域做映射，这是左上角和右下角的坐标-->
<area shape="rect" href="第三讲练习课程表表格编写.html" coords="140,20,280,60">
<!--对多边形区域做映射，这是多边形每个点的坐标-->
<area shape="poly" href="第三讲练习课程表表格编写.html" coords="100,100,180,80,200,140">
<!--对圆形区域做映射，这是圆的圆心坐标和半径像素长度-->
<area shape="circle" href="第三讲练习课程表表格编写.html" coords="80,100,60">
</map></body></html>
映射图片：
这篇关于HTML 图像 表格 图像映射 实际应用-菜谱、课程表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
