Html是標準的網頁語法，但是許多的變化是要利用CSS3
<table>
<caption> 表格名稱
所以如果你在表格的任地方打入<caption> 內容都會show在表格的上方
<tr> 表格攔 框線 間隔 寬度 格子與格子的距離
<td>表格的單位攔
<th>表格的值
包括排列，寬度，高度，顏色，都大同小異的功能設定，除了儲存格的外，也可加入影音的連結。目前我還沒試超連結，按推論應該也是可行的。
<!DOCTYPE html>
<--
巨匠電腦HTML語法練習
-->
<html>
<head>
<meta charset ="utf-8" />
<meta name = "keywords" content = "關鍵字" />
<title>表格練習練習</title>
</head>
<body>
<h1>表格練習</h1>
<br>
<table border="5" cellpadding="5" cellspacing = "0.5" width="550">
<caption><font size="20" color="green">影音分享</font></caption>
<tr bgcolor="blue">
<th align="center"><font color="white">樂手</font></th>
<th align="center"><font color="white">影片或音樂</font></th>
</tr>
<tr>
<td>BeeGees</td>
<td><video src="media/alive.mp4" controls width ="400"/></td>
</tr>
<tr>
<td>Unkonw</td>
<td><audio src="media/rose.mp3" controls width="400"></td>
</tr>
<tr>
<td>外部超連結</td>
<td><a href="httpp://www.microsoft.com"><font color="olive" face="DFKai-sb">微軟</font></a></td>
</tr>
</table>
<p>#本圖純粹只為練習使用表格不僅可放文字也可以放影音檔</p>
</body>
</html>
(成品網頁)
老師的臨時測試
將一個資料夾的網頁製作9張照片的相本，每張照片還能連結開啟新的網頁來看放大後的圖片，利用圖片<img>及超連結<a href>即可完成！
<!DOCTYPE html>
<--
巨匠電腦HTML語法練習
-->
<html>
<head>
<meta charset ="utf-8" />
<meta name = "keywords" content = "關鍵字" />
<title>表格練習練習</title>
</head>
<body>
<table align="center" cellpadding="10" cellspacing = "10" width="600">
<caption><font size="20">風景照片欣賞</caption>
<tr>
<td><a href="view/01.jpg" target="_blank"><img src="view/01.jpg" width="250"></img></a></td>
<td><a href="view/02.jpg" target="_blank"><img src="view/02.jpg" width="250"></img></a></td>
<td><a href="view/03.jpg" target="_blank"><img src="view/03.jpg" width="250"></img></a></td>
</tr>
<tr>
<td><a href="view/04.jpg" target="_blank"><img src="view/04.jpg" width="250"></img></a></td>
<td><a href="view/05.jpg" target="_blank"><img src="view/05.jpg" width="250"></img></a></td>
<td><a href="view/06.jpg" target="_blank"><img src="view/06.jpg" width="250"></img></a></td>
</tr>
<tr>
<td><a href="view/07.jpg" target="_blank"><img src="view/07.jpg" width="250"></img></a></td>
<td><a href="view/08.jpg" target="_blank"><img src="view/08.jpg" width="250"></img></a></td>
<td><a href="view/09.jpg" target="_blank"><img src="view/09.jpg" width="250"></img></a></td>
</tr>
</table>
</body>
</html>
(成品網頁)
由於問了老師有關於在同一個表格內合併一個正方形的儲存格，不過老師有點會錯意了，解釋了一個子母表格的製作，當然這個在實務上其實沒有太大的用意，所以就把它當作腦筋激盪。
Html撰寫的重點是一個表格內再撰寫兩個表格，簡要舉例就是：
<Table>
<TD><Table></Table></TD>
<TD><Table></Table></TD>
</Table>
實際Html語法作業如下
<!DOCTYPE html>
<--
巨匠電腦HTML語法練習
-->
<html>
<head>
<meta charset ="utf-8" />
<meta name = "keywords" content = "關鍵字" />
<title>表格練習練習</title>
</head>
<body>
<table align="center" cellpadding="1" cellspacing = "1" width="600" height="200">
<td>
<table border="1" width="300" height="200">
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td>
<table border="1" width="300" height="200">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</table>
</body>
</html>
網頁成圖的兩個子母表格如下：
至於我的問題，再跟老師提了一下，老師的答覆是可以，但是沒有任何的提示，我實際也沒有做出來！
沒有留言:
張貼留言