表格和表单的格式化
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%;
}