表格除了显示数据外，还常常被用来排版。
表单作为与用户交互的窗口，时刻扮演着信息获取和反馈的角色。
6.1 控制表格
在<table>标记中除了使用了border属性勾勒出表格的边框外，还使用了summary属性。该属性的值用于概括整个表格的内容，在用浏览器浏览页面时，他的效果是不可见的，但对搜索引擎等十分重要。
<caption>标记的作用跟它的名称一样，就是表格的大标题，该标记可以出现在<table>与</table>之间的任意位置，不过通常习惯放在第一行，及紧接着<table>标记。
<caption>标记还有专用的属性caption-side，用于调整表格标题的位置，但只在firefox下有效，IE对它的支持并不理想。
<th>标记在表格中主要用于行或者列的名称。<th>标记中的scope属性就是专门来区分航名称和列名称的，分别设置scope的值为row或者col，即可分别指定名称为行的名称或列的名称。
在表格中正确使用各种标记非常重要，对于CSS而言，给表格添加类别（例如.datalist）后，如果表格的各种标记运用得当，可以轻松的设置各种样式。例如表格标题的”.datalist caption”，表格行的”.datalist tr”，等等。
通过color属性设置表格中文字的颜色
通过background属性设置表格的背景颜色
border属性设置表格边框的粗细，当设置其值为0时，表明表格没有边框。<table>标记中的bordercolor属性可以用来设置表格边框的颜色
CSS中表格的border-collapse属性，使得边框重叠在一起
6.2 表格实例一：隔行变色
在CSS中实现隔行变色十分简单，主要在于给偶数行的<tr>标记都添加上相应的类型，即：<tr class=”altow”>，然后在CSS样式表中对偶数行进行单独的样式设置，主要是在配合整体设计协调的基础上，加深背景颜色等。
6.3 表格实例二：鼠标经过时变色的表格
首先建立好整个表格，所有行的颜色不单独设置，统一采用表格本身的背景色。
对于Firefox浏览器而言，仅仅通过CSS便可以实现该效果，为<tr>标记添加如下代码：
.datalist tr:hover,{
background-color:#c4e4ff;
}
即直接调用<tr>标记的伪类别hover来实现动态的变色效果。
而IE浏览器并不支持<tr>标记的伪类别，，因此必须采用JavaScript动态的配合，为<tr>标记添加CSS类型如下：
.datalist tr:hover,.datalist tr.altrow{
background-color:#c4e4ff;
}
然后在<table>后添加JavaScript代码，已提取表格中的<tr>标记，并用函数判断鼠标指针是否移到了某行上，如果移动到了某行上，则调用新的CSS属性使该行背景变色。
<style>
.datalist tr:hover,.datalist tr.altrow{
background-color:#c4e4ff;
}
</style>
<table>
</table>
<script language=”javascript”>
var rows=documentsByTagName(‘tr’);
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){ //鼠标指针在行上面的时候
this.className+=”altrw”;
}
rows[i].onmouseout=function(){ //鼠标指针离开时
this.className=this.className.replace(‘altrow’)
}
}
</script>
</body>
</html>
6.4表格实例三：日历
首先按照传统的方法建立最简单的表格，包括建立表格的标题<caption>，以及利用<th>表示星期一到星期日，并给表格定义CSS类别。
依次建立好整个日历表格的框架结构后，便开始加入CSS属性控制其样式风格：首先添加对整个表格的控制，以及相应的<caption>、<th>和<td>。然后对日程安排中的事情列表进行CSS控制，清楚每个事件前面的小圆点，事件与事件之间添加一些空隙。最后为上个月的日期previous、下个月的日期next和有日程安排的日期active等3个特殊的类别添加CSS样式，目的在于给整个日历添彩。
6.5 CSS表单
表单中的元素很多，包括常用的输入框、文本框、单选项、复选框、下拉菜单和按钮等。
普通表单的源码主要包括<form>、<input>、<textarea>、<select>和<option>等几个标记。
利用CSS对标记的控制，对整个表单添加简单的样式风格，包括边框、背景色、宽度和高度等。如下：
form{
border:1px dotted #AAAAAA;
padding:3px 6px 3px 6px;
margin:0px;
font:14px Arial;
}
input{
}
select{
}
textarea{
}
此时表单看上去不那么单调了。但是单选项和复选框对于边框的显示效果，在浏览器IE和Firefox中有明显的区别。因此在设计表单时通常的方法还是给具体的各项添加类别属性，进行单独的设置。
经验之谈：各个浏览器之间显示的差异通常都是因为各浏览器对部分CSS属性的默认值不同导致的，通常的解决办法就是指定该值，而不让浏览器使用默认值。
首先跟普通的表单一样，定义<form>、<input>等标记，并设置相应的类型，以便通过CSS控制其样式。
然后给表单的样式添加CSS样式，关键在于将按钮的背景颜色设置为透明”transparent”，这样无论页面body的背景颜色如何修改，按钮的背景色都会发生相应的变化。接下来再将按钮的边框设置为0。在设置按钮和文本框的背景色为透明之后，两者都会将自己的背景色调整为跟页面背景色相一致，再配合文本框的下划线效果，按钮就显得十分自然了。
经验之谈：这种将按钮边框隐藏的思想与采用<style>标记对页面排版的思路是一致的，都是将元素的边框隐藏，从而直接利用其内容的特性。
