HTML學習（4）圖像和表格

HTML 圖像

1. 創建圖像映射

圖像1中有可供點擊的3個區域，每個區域都是一個超級鏈接，點擊後顯示另一個圖像。

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<img>表示圖像1，其中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），所以應該同時向 <map> 添加 id 和 name 屬性。

alt屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本。

<map>標籤定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點擊區域的一幅圖像。

<area>標籤定義圖像映射中的區域（圖像映射指得是帶有可點擊區域的圖像）。area 元素總是嵌套在 <map> 標籤中。

<area>屬性：

屬性	值	描述
coords	座標值	定義可點擊區域（對鼠標敏感的區域）的座標。
href	URL	定義此區域的目標 URL。
nohref	nohref	從圖像映射排除某個區域。
shape	default rect circ poly	定義區域的形狀。
target	_blank _parent _self _top	規定在何處打開 href 屬性指定的目標 URL。

實踐了一下，感覺不錯。實踐前我沒有研究如何確定座標值，實踐時直接用座標值試驗。座標值是指在圖像1上的座標，即如果圖像是矩形，寬800高100，那麼coords="0,0,800,100" shape="rect"，則覆蓋整個圖像1。

HTML 表格

1. 在 HTML 文檔中創建表格

<table border="1"> //表格由 <table> 標籤開始。border表示表格邊框。

<caption>標題內容</caption> //標題

<tr>
<th>表頭數據</th> //表頭由 <th> 標籤定義。大多數瀏覽器會把表頭顯示爲粗體居中的文本。
......
<th>表頭數據</th>
</tr>

<tr> //每個表格行由 <tr> 標籤開始。
<td>表格數據</td> //每個表格數據（列）由 <td> 標籤開始。
......
<td> </td> //如果單元格中沒有內容，可以添加一個空格佔位符。
</tr>
......
<tr>
<td>表格數據</td>
......
<td>表格數據</td>
</tr>

</table>

用colspan和rowspan屬性表示跨列或跨行的單元格。
跨2列：<th colspan="2">表頭數據</th>；跨2行：<th rowspan="2">表頭數據</th>。

<table>中的cellpadding屬性可以設置表格數據與邊框間的距離。
<table>中的cellspacing屬性可以設置邊框與邊框間的距離。
<table>中的frame屬性可以控制圍繞表格的邊框。