表格(Table)除了可以存放文字之外，也可以放置影音資訊在其中，而列表(List)除了可以在文章中作為章節的目錄之外，甚至可以配合CSS做成按鈕(Button)以供超聯結使用，而選單(Select)也是網站再重要不過的元素，如果一個網站的資料越來越多時，就會需要依靠搜尋的功能來供使用者搜尋需要的資料，而搜尋功能就可以配合選單(Select)將網站的資料做個索引分類，使用者可以直接選擇索引來作搜尋，當然選單(Select)也可以作為超聯結的功能，完全看開發者如何使用這些標示。
那麼首先就先介紹表單(Table)的標示有哪些子標示可以使用，表單的組成是由"行(Column)"跟"列(Row)"，這兩個的標示分別是<td></td>與<tr></tr>，在這之前必須先搞清楚什麼是"行"，什麼是"列"，行的意思就像是阿拉伯數字的"1"，列的意思就是中文字的"一"。
例如: 2列3行的表格(Table)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table >
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
</body>
</html>
結果:
表格加入邊框效果，將<table>改為<table border="1">即可，而"1"指的是邊框的寬度。
結果:
再來就是介紹列表(List)，列表標示為<ul></ul>，列表項目標示為<li></li>。
例如: 用列表(List)來做文章目錄
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<ul>
<li>目錄</li>
<li>介紹</li>
<li>方法</li>
<li>實驗結果</li>
<li>未來展望</li>
</ul>
</body>
</html>
結果:
將 筆記2:文字型態與文字排版所記載的作結合，調整目錄的文字大小。
<ul>
<li><h1>目錄</h1></li>
<li><h1>介紹</h1></li>
<li><h1>方法</h1></li>
<li><h1>實驗結果</h1></li>
<li><h1>未來展望</h1></li>
</ul>
結果:
最後介紹選單(Select)，選單標示為<select></select>，選單項目標示為<option></option>。
例如:資料依據日期作為選單(Select)的選項
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<select>
<option>2016年1月</option>
<option>2016年2月</option>
<option>2016年3月</option>
<option>2016年4月</option>
<option>2016年5月</option>
<option>2016年6月</option>
<option>2016年7月</option>
<option>2016年8月</option>
<option>2016年9月</option>
<option>2016年10月</option>
<option>2016年11月</option>
<option>2016年12月</option>
</select>
</body>
</html>
結果:
沒有留言:
張貼留言