css011 表格和表单的格式化
一、 让表格专司其职
Html中创建一个三行三列的表格
<table>
<caption align="bottom">
table 1:cosmofarmer.com‘s indoor mower roundup
</caption>
<colgroup>
<col id="brand"></col>
<col id="price"></col>
<col id="power"></col>
</colgroup>
<thead>
<tr>
<th scope="col">brand</th>
<th scope="col">price</th>
<th scope="col">power</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>$988</td>
<td>lal</td>
</tr>
<tr>
<td>hi</td>
<td>$1000</td>
<td>lalala</td>
</tr>
</tbody>
</table>
用到的标签比较多<table> <caption> <colgroup> <col> <thead> <tr> <th> <td>
二、 给表格定义样式
1、添加padding
td{padding:10px 5px 2px 6px;}
2、调整垂直对齐和水平对齐
text-align和vertical-align
text-align控制水平定位方向
值：left right center justify
table {text-align:center; }
vertical-align调整垂直定位方向
值：top baseline middle bottom
3、创建边框border
控制表格之间的空格
border-spacing：5px；
table{ border-spacing：5px; }
4、消除双边框
table{ border-collapse:collapse; }
5、圆角
border-radius
td{
border:1px solid black;
border-radius:5px;
}
6、给行和列定义样式
tr:nth-of-type(odd) {background-color:red;}
tr:nth-of-type(even) {background-color:blue;}
td:nth-of-type(odd) {background-color:red;}
td:nth-of-type(even) {background-color:red;}
三、 给表单定义样式
font background-color color margin padding等
1、html表单元素
<fieldset>
<legend></legend>
</fieldset>
text fields（文本域）
button
drop-down menus（下来菜单）
checkbox（复选框）
2、利用css布置表单
a、 每一个label标签都用一个tag标签包围起来
b、用display属性值设为inline-block，并设置宽度
.albel{
display:inline-block;
width:20px;
}
c、 调整样式
.albel{
float:left;
width:20px;
vertical-align:top;
text-align:right;
margin-top:20px;
}