【CSS系列】对表单和数据表格应用样式

表格特有的元素：

1、summary和caption

caption用作与表格的标题。summary应用于表格标签，用来描述表格的内容，于image标签的alt文本相似。

2、thead tbody 和tfoot

这3个标签可以让开发人员将表格划分为逻辑部分。

行和列标题应该使用th标记而不是td,但是如果某些内容既是标题又是数据，那么仍然应该使用td,表格标题可以设置值为row或col的scope属性，定义他们是行标题还是列标题。他们还可以设置值rowgroup和colgroup，表示他们与多行或多列相关。

3、col和colgroup

虽然tr元素使开发人员能够对整行应用样式，但是很难对整列应用样式。colgroup能够对使用col元素定义的一个或多个列进行分组。

4、将标签和表单关联起来

<label>email <input name="email" type="text"/></label><!--方式1-->

<label for="email">email</label>
<input name="email" id="email" type="text"/><!--方式2-->

5、fieldset元素将表单组合起来

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

fieldset{
    margin:1em 0;
    padding:1em;
    border:1px solid #ccc;
    background:#f8f8f8;}
legend{
    font-weight:bold;}

<form>
<fieldset>
 <legend>Your Contact Details</legend>
 <p>
 <label for="author">Name:</label>
 <input name="author" id="author" type="text"/>
 </p>
  <p>
 <label for="email">Email:</label>
 <input name="email" id="email" type="text"/>
 </p>
  <p>
 <label for="url">Web Address:</label>
 <input name="url" id="url" type="text"/>
 </p>
 </fieldset>
</form>