7-4 在表格內嵌入圖片

在第6章筆者介紹了建立表格的知識，其實我們也可以在表格內嵌入圖片，下面將以實例說明。

程序實例ch7_6.html：在ch7文件夾有rushmore.jpg和yellowstone.jpg圖文件，本例會將這兩張圖嵌入表格內。

執行結果

讀者須留意的是第15行和第19行，過去表格的單元格放的是文本數據，本例使用<img>元素嵌入的是圖片，同時為了避免圖片的尺寸太大表格走樣，筆者特別設定了其寬度是150px。其實未來讀者在設計這類網頁時，也可以同時設定圖片的高度和寬度，不過可能會有圖片沒有保持寬高比的問題。

程序實例ch7_7.html：設計網頁時，在同一行中也可以將圖片與文字并列，以達到增強印象的效果。本程序基本上是修訂前一個程序實例，將用到一個gif文件blueball.gif，筆者將在表格黃石國家公園和摩斯山字符串前將加上blueball.gif圖形。

blueball.gif文件內容如下：

執行結果

上述程序使用兩次blueball.gif圖片，卻大小不同，這是筆者故意的，用意在于讓讀者了解在“黃石國家公園”字符串前加上blueball.gif源文件，與修正圖片大小后的結果。程序第16行筆者使用圖片的默認大小，發現圖形的顯示大于字符串太多，似乎不協調。有時候碰上圖形與字符串在同一行顯示時或是想單獨調整圖形大小時可以在嵌入圖片時，具體就直接指定圖形的寬度，具體可參考程序第20行。