表格特有的元素
<summary>:same as "alt" in <img>
<caption>:title
<thead>:邏輯部分
<tfoot>:邏輯部分
<tbody>:邏輯部分
<col>:可以給每個(gè)標(biāo)題的<th>設(shè)置scope屬性，表示與列相關(guān)
表單特有的元素
<fieldset>:對(duì)相關(guān)信息分組
<legend>:fieldset的標(biāo)題，一般在fieldset上方居中，很難應(yīng)用樣式
<lable>:用lable與表單元素聯(lián)系
有兩種方法
- 隱式：
<pre><lable>email<input name="email" type="text"></lable></pre> - 顯示：
<pre><lable for="email">email</lable> <input name="email" id="email" type="text"></pre>
仿照書上例子畫的表格：
<pre>
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Top 3 play list</title>
<style type="text/css">
</style>
</head>
<body>
<table cellspacing="0" class="cal" summary="Top 3 play list">
<caption>Top 3 play list</caption>
<colgroup>
<col id="Entry" />
<col id="Track" />
<col id="Artist" />
<col id="Album" />
</colgroup>
<thead>
<tr>
<th id="Entry" scope="col">Entry</th>
<th scope="col">Track</th>
<th scope="col">Artist</th>
<th scope="col">Album</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td>Hide</td>
<td>Kosheen</td>
<td>Kesist</td>
</tr>
<tr>
<td>2</td>
<td>.38.45</td>
<td>Corpation</td>
<td>Sound from</td>
</tr>
<tr class="odd">
<td>3</td>
<td>Fix you</td>
<td>Coldplay</td>
<td>X&Y</td>
</tr>
</tbody>
</table>
</body>
</html>
`
</pre>
表單
<pre>
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<style type="text/css">
</style>
</head>
<body>
<form action="#" method="POST">
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name<em class="required">(Required)</em></label>
<input type="text" name="author" id="author">
</div>
<div>
<label for="email">Email Address</label>
<input type="text" name="email" id="email"><span class="feedback">Incorrect email address. Please try again.</span>
</div>
<div>
<label for="address">Web Address</label>
<input type="text" name="address" id="address">
</div>
</fieldset>
<fieldset>
<legend>Comments</legend>
<label>Message:<em class="Required">(Required)</em></label>
<textarea name="message" rows="10"></textarea>
</fieldset>
<fieldset>
<legend>Gender</legend>
<label for="male"><input id="gender-male" class="radio" name="gender" type="radio" value="male">male</label>
<label for="female"><input id="gender-female" class="radio" name="gender" type="radio" value="female">female</label>
</fieldset>
<div>
<input class="submit" type="submit" name="submit" value="submit">
</div>
</form>
</body>
</html>
`
</pre>
要實(shí)現(xiàn)看起來很見到的例子都好難啊，很多細(xì)節(jié)要考慮，盒模型很重要的樣子。
