CSS样式学习笔记之五：表格的学习和表格的样式

1表格特有的元素：caption 和summary

<table id="myTable" summary="business table" >

                  <caption>在这里填写表格的表头</caption>

</table>

对表头运用样式，类型选择器：

caption{
  margin:0;
  padding-left:300px;
  background: transparent url("../images/navigator-bg.gif") repeat scroll left top; 
}

2thead,tbody,tfoot三个要素可以将表格划分为几个部分，一个表格只能有一个thead,tfoot，也可以没有，但如果有了thead,tfoot中的任何一个，那么必须有一个tbody, 也可以有多个。

<table id="myTable" summary="business table" >

                  <caption>在这里填写表格的表头</caption>

       <thead>

                   <tr><td>head</td></tr>

      </thead>

 

      <tbody>

                   <tr><td>body</td></tr>

      </tbody>

 

      <tfoot>

                   <tr><td>foot</td></tr>

      </tfoot>

</table>

对表格运用样式

table{

 width:50em;

 boder:1px solid;

}

th,td{

  padding:1.1em;

 

}

 3使用交替的蓝色和白色行

/*设计交差行样式所设计*/
.odd td {
 background-color: white;
}
<c:forEach var="result" items="${requestScope.page.items}" varStatus="varStatus">
      <c:choose>
       <c:when test="${varStatus.index % 2 == 1}">
        <c:set var="class" value="odd"></c:set>
       </c:when>
       <c:otherwise>
        <c:set var="class" value=""></c:set>
       </c:otherwise>
      </c:choose>
   <tr class="${class}">