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;

}