表格特有的元素
<summary>:same as "alt" in <img>
<caption>:title
<thead>:逻辑部分
<tfoot>:逻辑部分
<tbody>:逻辑部分
<col>:可以给每个标题的<th>设置scope属性，表示与列相关
表单特有的元素
<fieldset>:对相关信息分组
<legend>:fieldset的标题，一般在fieldset上方居中，很难应用样式
<lable>:用lable与表单元素联系
有两种方法
- 隐式：
<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>
要实现看起来很见到的例子都好难啊，很多细节要考虑，盒模型很重要的样子。
网友评论