CSS3秘笈：第十一章

表格和表单的格式化

1.表格的各种标签提供了许多有用的“钩子”，可以再上面挂CSS样式。如果创建了<th>标签样式，那么每一个列的标题——<th>标签——看起来就有可能与其他的表格单元不同，也可以使用<colgroup>标签方便地为表格单元列来设置宽度。

2.padding指一个元素的边框与其内容之间的空间。你可以用padding在段落的文本与其边框之间添加一点空间。对于表格而言，边框就是指表格单元的边，因此padding是在表格单元里的内容周围添加空间。它还有一个好处，即可以分别控制单元内容与其各条边之间的空间。如果要在所有表格单元里面添加10px的空间，可以使用这个样式

td,  th  { padding:  10px;}

还可以分别控制每一条边的间隔。假设要在每个表格数据单元的顶部添加1-px的空间，在底部添加3px，在左右两侧各添加5px，可以创建这个样式：

td  {

padding-top:：10px；

padding-right：5px；

padding-bottom：3px；

padding-left：5px；

}

或者利用padding快捷属性，像这样：

td  {

padding： 10px  5px  3px  5px;

3.要控制内容在表格单元内的位置，可利用text-align和vertical-align属性。

text-align控制水平方向的定位，可以设成left、right、center和justify。这是一个可以被继承的属性。如果要让所有表格单元的内容都靠右对齐，可以像这样创建样式：

table  { text-align：right；}

这个属性对<th>标签很有用，因为浏览器通常让它们居中对齐。像th  {  text-align：left；}这样一个简单的样式，就能使表格的标题与表格单元对齐。

4.CSS中border（边框）属性的作用与其他元素的table（表格）十分相似，但是需要牢记以下几点：首先，在格式化<table>标签的样式中设置border时，它只会给表格添加边框，而不会给任何表格单元添加边框。其次，对表格单元设置border时（td { border：lpx solid black； }），会在表格单元之间留下一条明显可见的间隙。

5.控制表格单元之间的空格。除非另有指示，否则浏览器都会让表格单元隔开几个像素。当你对表格单元应用边框时，实际上很容易看到这条间隙。CSS提供了border-spacing属性用来控制这条间隙。将该属性应用到表格本身，并且如果希望删除浏览器通常会在单元格之间显示的那部分空格，则可以将border-spacing的值设为0：

table {

border-spacing：0；

}

如果喜欢单元格之间有空格，还可以添加空格：

table {

border-spacing；2px；

}

消除双边框。collapse选项可以消除单元间隔和双边框。其做法是在格式化表格的样式中设定collapse值，像这样:

table { border-collapse: collapse; }

圆角。利用border-radius属性可以给表格单元添加圆角。例如，如果想要将表格单元框起来，给他们添加圆角，可以像这样创建样式：

td {

border：lpx solid black；

border-radius：5px；

注意，如果将border-collapse属性值设为collapse，那么浏览器将会忽略为表格单元设置的所有border-radius；他们将只是绘制出普通的正方形角。

6.以下是一些常见的表单标签，以及与它们相关的属性类型。

fieldset。<fieldset>标签用来集中相关表单问题。

legend。<legend>标签就在<fieldset>标签的HTML代码之后，它给一组域提供一个标签。

text fields（文本域）。<input  type="text">、<input  type="password">以及<textarea>标签都是在表单中创建文本框。

buttons（按钮）。表单按钮，比如<input  type="submit">，是让访问者提交表单、重填内容、或者触发一些其他的动作。

drop-down  menus（下拉菜单）。对于由<select>标签创建的下拉菜单，也可以在一定程度上定义样式。

checkbox（复选框）和radio button（单选按钮）。大部分浏览器都不允许对这些元素设定格式。但Opera却允许你在复选框或按钮里面设置一种背景色。

7.给表格定义样式

（1）在Web浏览器上打开文件11→table→table.html。

（2）在文本编辑器中打开table.html。

（3）在开始的和闭合的<style>标签之间单击，然后添加以下样式：

.inventory  {

font-family："Trebuchet  Ms", Arial, Helvetica, sans-serif；

width：100%；

（4）在刚刚创建的表格样式下方添加另一个样式：

.inventory  caption  {

text-align：right；

font-size：l . 3em；

margin-bottm：10px；

}

（5）在内部样式表中添加以下样式组：

.inventory  td,  .inventory  th {

font-size:  1 . 1em;

border:  1px  solid  #DDB575;

（6）在第3步创建的表格样式中添加border-collapse属性，像这样：

.inventory  {

font-family: "Trebuchet  Ms",Arial,  Helvetica,  sans-serif;

width: 100%;

margin-top:25px

border-collapse: collapse;

（7）在第5步创建的群组选择器中添加padding:

.inventory  td,  .inventory  th  {

font-size:  l . lem;

border:  lpx  solid  #DDB575;

padding:  3px  7px  2px  7px;

}

（8）在格式化表格标题单元的.inventory  td,  .inventory  th样式下方添加一个新的样式：

.inventory  th  {

text-transform:  uppercase;

text-align:  left;

padding-top:  5px;

padding-bottom:  4px;

（9）在th样式中给背景添加线性渐变，并修改文本的颜色：

.inventory  th  {

text-transform:  uppercase;

text-align:  left;

padding-top:  5px;

padding-bottom:  4px;

background:  rgb(229,76,16),

background:  -webkit-linear-gradient(rgb(229,76,16),

rgb(173,54,8));

background:  -moz-linear-gradient(rgb(229,76,16),

rgb(173,54,8));

background:  -o-linear-gradient(rgb(229,76,16),

rgb(173,54,8));

background:  linear-gradient(rgb(229,76,16),  rgb(173,54,8));

color:  white;

}

（10）在网页的内部样式表中再添加一个样式:

.inventory  tr:nth-of-type(even){

backround-color:  rgba(255,255,255, . l);

}

.inventory  tr : nth-of-type(odd) {

background-color:  rgba(229,76,16, . l );

}

（11）在网页的内部样式：

#price,  #rating  {

width:  15%;

}