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

巴特西

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

表格特有的元素：

最新文章

热门文章