精通CSS——chapter7（对表单和数据表格应用样式）

7.1对数据表格应用样式

很多人包括我自己都认为表格设计比较有缺陷，所以尽可能避免是用布局表格，想用纯css来创建日历，，但是日历本质上仍然是基于表格的内容。web上仍然有需要用到表格的地方。

介绍几个表格特有的元素。

1、summary和caption

caption用作表格的标题

<caption>

    <a href="#" rel="prev">&lt;</a> January 2008 <a href="#" rel="next">&gt;</a>

</caption>

而summary是用来作为表格标签，用来描述表格的内容，与图像alt文本相似，summary应该总结表格中的数据，编写得出色的summary能减少用户阅读表格内容的需要。

<table class="cal" summary="A calandar style date picker" cellspacing="0">

2、thead、tbody和tfoot

行标题和列标题应该使用th而不是td标记，但是如果某些内容既是标题又是数据，那么我们要用td。表格标题可以是row或者col的scope属性，分别表示他们是行标题还是列标题。还可以设置rowgroup和colgroup的值，表示他们与多行和多列有关，这里就引出这几行代码。

<colgroup>

  <col id="sun" />

  <col id="mon" />

  <col id="tue" />

  <col id="wed" />

  <col id="thur" />

  <col id="fri" />

  <col id="sat" />

</colgroup>

这里在实际网页当中是没有显示出来，他更多是一种标记，规定，说明白这个列标题，每一列是什么来的。

CSS规范有两个表格边盒模型，单独的和叠加的，在单独模型当中，在各个单元格周围有边框，而在叠加模型中，单元格共享边框，大多数浏览器默认采用单独的，也就是当有很多单元格在一个表格里面的时候，他们之间就会有一定的距离而不是完全贴在一块，所以我们就要使用到border-collapse：collapse；让这些边框全部合在一块，然后他还有一个值就是separate，就是所有单元格分开。

table.cal {

    border-collapse: seperate;

    border-spacing: 0;

    text-align: center;

    color: #333;

}

.cal th, .cal td {

    margin: 0;

    padding: 0;

}

CSSS的border-spacing属性是可以控制单元格之间的距离。同样起到了border-collapse的作用。

思考：我在想如果当我点击一个按钮的时候怎么样才能有相应的selected属性切换到我按到的那个按钮，其实我们可以转换一下思路。那就是把按钮强行转换成a标签，如果我们用了a标签，那么我们就有hover，active，focus，visited等可以用了。

7.2简单的表单布局

说到表单可以提到这个fieldest，他是用来对相关的信息块进行分组，他的功能：1、详细信息2、用于注释。大多数用户代理在fieldset周围加上一个细线边框，将border属性设置为none可以关闭。

为了识别fieldset的用途，可以使用legend元素，legend就像是fieldset的标题，它常常在fieldset的顶部垂直居中，并且向右缩进一点点，但是legend没有办法改变样式，所以会因为我们使用的不同浏览器有差异。

我们要习惯于使用表单标签，比如说label，这个标签及其重要，如果我们就单单写几个字上去作为说明的话，屏幕阅读器会忽略掉这个说明，他就会猜测哪些文本跟哪个表单元素有关。

<label for="email">email<label>

<input name="email" id="email" type="text"/>

由上面讲的东西，我们组成了个基本布局

<fieldset>

    <legend>Your Contact Details</legend>

    <div>

    <label for="author">Name: <em class="required">(Required)</em></label>

    <input name="author" id="author" type="text" />

    </div>

    <div>

    <label for="email">Email Address:</label>

    <input name="email" id="email" type="text" />

    </div>

    <div>

    <label for="url">Web Address:</label>

    <input name="url" id="url" type="text" />

    </div>

</fieldset>

将标签定位在表单的上方实际上非常简单，标签在默认情况下是行内元素，但是如果我们把display设置为block，那么就会是他们产生自己的块框，破事输入元素到下一行

文本区域的尺寸在不同的浏览器中不一样，所以我们应把宽度设置为100%；所以实际上宽度有父元素决定。

如果我们想给某一个输入框设定样式，那么我们可以用属性选择器

input[type="text"]{

     width:20em;

}

我们希望在元素获得焦点（也就是当我们鼠标点击）时可以改变背景颜色，从而帮助用户轻松的找到要填写的区域

input[type="text"]:focus, textarea:focus {

    background: #ffc;

}

7.3复杂的布局

对于比较长的复杂的表单，垂直间距会造成问题，表单也不容易查看。为了便于浏览，减少使用的垂直空间，有必要将标签和表单元素水平布置而不是垂直布置。我们并不把标签设置块级元素，而是让标签向左浮动

label {

    float: left;

    clear: left;

    width: 10em;

}

如果表单标签可能跨多行，那么我们还要清理div容器，这会避免他们干扰下一组标签和弄乱布局。

.clear {

  clear: both;

}

我们先来看看这个东西

<div>

    <label for="dateOfBirth">Date of Birth:</label>

  <input name="dateOfBirth" id="dateOfBirth" type="text"  />

  <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>

  <select name="monthOfBirth" id="monthOfBirth">

  <option value="1">January</option>

  <option value="2">February</option>

  <option value="3">March</option>

  </select>

  <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>

  <input name="yearOfBirth" id="yearOfBirth" type="text" />

    </div>

在这里看到我们是有一个monthBirthlabel的东西在的，然后如果我们把这些年月日的标签都放到一块去的话就不太美观，但是呢如果我们不加标签label的话，那么屏幕阅读器就读取不到数据内容，所以我们不可能用display：none来把它消灭，所以不这样做，而是通过值较大的富文本缩进将标签定位到屏幕之外。

#monthOfBirthLabel, #yearOfBirthLabel {

  text-indent: -1000em;

    width: 0;

}

还要把宽度设为0，这样万全准备。

说到按钮，那么我们会有一个button还有input，两者相比较，button有更强的灵活性，比如说可以把图像放在这个button当中，让图像成为控件。

最后讲到一个叫表单反馈的东西，

也就是那些如果你的用户名已经被注册过了，那么就会在旁边弹出来的东西。

我们可以把反馈文本放在一个em当中，将这个em放在源代码中文本输入元素的后面。但是为了让他们正确地排列，em和前面的input元素都需要浮动，这会对包围他们的段落造成影响。而且许多屏幕阅读器会忽略表单元素之间的文本，除非把文本放在标签当中，为了避免这个问题，最好的方法就是将错误消息文本放在表单标签当中，然后进行css定位。

    <div>

    <label for="email">Email Address is really, really, really really long: <em class="feedback">Incorrect email address. Please try again.</em></label>

    <input name="email" id="email" type="text" />

    </div>

这里就加入了em标签，然后我们需要将表单中段落的position设置为relative，从而建立一个新的定位上下文，然后可以反馈em进行绝对定位。

form div {

  position: relative;

    width: 100%;

    padding: 0.4em 0;

    clear: both;

}

label .feedback {

    position: absolute;

    left: 31em;

  right: 0;

    top: 0.5em;

    font-weight: bold;

    color:#760000;

    padding-left: 20px;

    background: url(img/error.png) no-repeat left top;

}