【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>