HTML+CSS(三)——数据表格及表单应用样式

   首先，推荐两本关于css的书籍，一本是《css禅意花园》，一本是《精通css：高级web标准解决方案》，两本都比较适合在初步了解css基本内容之后去读。第一本讲了一些好的布局案例，更偏向于教会如何去设计完整的页面，个人认为比较适合在熟练掌握Html+css内容后再去读；后一本更加详细的介绍了一些具体的内容，如：如何对链接应用样式，对列表 应用样式和创建导航条，bug和bug修复等，但是书中也是有一些错误，在应用样式时应该注意。
上周学习了对链接应用样式、布局、对表单和数据表格应用样式，这三个内容中第一个比较容易，布局在前面的总结中已经有所简单介绍过，这篇中主要介绍对表单和数据表格应用样式。

数据表格

• 在为表格应用样式前应该先有一个较好的HTML文本

    
Top 15 Playlist
    
        
        
        
        
    
    

      

        
Playlist Position
        
Track Name
        
Artist
        
Album
      
 
    
    

        

            
1
            
Hide You
            
Kosheen
            
Resist
        
        

            
2
            
.38.45
            
Thievery Corporation
            
Sounds From the Thievery Hi-fi
        
        

            
3
            
Fix You
            
Cold Play
            
X&Y
        
    
    

这里面有几个表格特有的元素：
1.summary和caption

• summary应用于表格标签，描述表格内容；
• caption用做表格的标题。

2.thead、tbody和foot

• 这个三可以将表格划分为逻辑部分。可以将所有列标题放在thead元素中，这样就可以对这个特殊区域统一单独应用样式。如果选择thead或tfoot元素，就必须至少使用一个tbody元素。在一个表格中只能使用一个thead和tfootuansu，但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分。

3.col和colgroup

• tr能对整行应用样式，但是很难对整列应用样式。colgroup能够使用col元素定义一个或多个列进行分组。
  接下来就是对表格应用样式了

table{
    border-collapse: collapse;
    width:50em;
    border:1px soid #666;
}
caption{
    font-size: 1.2em;
    font-weight: bold;
    margin:1em 0;
}
 col{
    border-right: 1px solid black;
}
#albumCol{
    border:none;
}
thead {
    background: #ccc;
    border-top: 1px soild #a5a5a5;
    border-bottom:1px soild #a5a5a5;
}
th{
    font-weight:normal;
    text-align:left;
}
th, td{
    padding: 0.1em 1em;
}
#playlistPosHead{
    text-indent:-1000em;
}
tbody tr:nth-child(even){
    background-color:#edf5ff;
}
tr:hover{
    background-color:#3d80df;
    color:#fff;
}
thead tr:hover{
    background-color:transparent;
    color:inherit;
    
}

  首先，给表格设置一个宽度，调整表格间距并使每个方格的数据左对齐，
使用：nth-child选择器交错使偶数行或者奇数行显示不同颜色，不需要使用给每个交替行添加类。:hover动态伪类可以在鼠标滑动到某一行时显示，某个样式。当然还可以给表格加上边框，或者将字体加粗也是同样的方法。

添加样式后的表格

表单

        
个人信息
        

            Place Of Birth:
            
                China
                USA
            
        
        

            Date Of Birth:
            
            
               January
               Februry
               March
            
                       
        
            
Favorite Color:
        

        

           
           red
           
           bule
            
           black
        
        
        

            
            yellow
            
            orange
            
            white
        
      
      

  先通过html的标签和属性创建一个简单的表单，

标签可以对整个组进行定位。在这个表单上用到的所有表单控件都包含name和id属性，在表单输入控件和标签之间创建关联需要id属性，而将表单数据发送回服务器需要name属性。

fieldset{
    width:30em;
}
input#DateOfBirth{
    width:50px;
    margin-right: 0.5em;
}
select#monthOfBirth{
    width: 10em;
    margin-right: 0.5em;
}
input#YearOfBirth{
    width:50px;
}

  同样可以给表单设置任意宽度，不让随浏览器变化，当需要某种形式的反馈消息，可以在适当的区域添加一个错误消息提示。可以将反馈文本放在标签中，并放在源代码中文本输入元素的后面，然后使用CSS进行定位。

部分表单

  在之前模仿写趣医网的静态页面时，用了大量的div标签，虽然可以达到自己想要的效果，但使得代码看起来比较乱又难读懂，在后面写的过程中应多熟练使用一些有意义的标签元素。