css011 表格和表单的格式化

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;

}