![HTML5+CSS3王者归来](https://wfqqreader-1252317822.image.myqcloud.com/cover/809/26846809/b_26846809.jpg)
上QQ阅读APP看书,第一时间看更新
7-4 在表格内嵌入图片
在第6章笔者介绍了建立表格的知识,其实我们也可以在表格内嵌入图片,下面将以实例说明。
程序实例ch7_6.html:在ch7文件夹有rushmore.jpg和yellowstone.jpg图文件,本例会将这两张图嵌入表格内。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P73_85864.jpg?sign=1739298776-UepVX96XAoWnXJf54zu8WNQq74S2Migs-0-b81ea2e532b0784723ed3ee388a32e30)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P73_85887.jpg?sign=1739298776-EyhCPdOLw5FSmTWSKjivpTK4qfDD1Yi3-0-6a9ee4319489eec0a94d67582d1fef02)
读者须留意的是第15行和第19行,过去表格的单元格放的是文本数据,本例使用<img>元素嵌入的是图片,同时为了避免图片的尺寸太大表格走样,笔者特别设定了其宽度是150px。其实未来读者在设计这类网页时,也可以同时设定图片的高度和宽度,不过可能会有图片没有保持宽高比的问题。
程序实例ch7_7.html:设计网页时,在同一行中也可以将图片与文字并列,以达到增强印象的效果。本程序基本上是修订前一个程序实例,将用到一个gif文件blueball.gif,笔者将在表格黄石国家公园和摩斯山字符串前将加上blueball.gif图形。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P74_85923.jpg?sign=1739298776-Y1JwwlB5nPFrq5pPu8NDAbOOMH2f0ugS-0-7d1cf776212692ee99d17b131ef033e3)
blueball.gif文件内容如下:
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P74.jpg?sign=1739298776-QJRub0z5asFB0tgmv1QxahCx6dLuQ5eK-0-319a3408b040fb8c7fa46310ed25f239)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P74_85932.jpg?sign=1739298776-Pvo3zv5Jai5jmlk2ccLh4383YFm1jT9l-0-38f975e67a7ce2c339f1cae06a1dd954)
上述程序使用两次blueball.gif图片,却大小不同,这是笔者故意的,用意在于让读者了解在“黄石国家公园”字符串前加上blueball.gif源文件,与修正图片大小后的结果。程序第16行笔者使用图片的默认大小,发现图形的显示大于字符串太多,似乎不协调。有时候碰上图形与字符串在同一行显示时或是想单独调整图形大小时可以在嵌入图片时,具体就直接指定图形的宽度,具体可参考程序第20行。