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;

}

css011 表格和表单的格式化的更多相关文章

  1. CSS3-animation,表格表单的格式化

    animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes  fadeI ...

  2. DOM之表格与表单基础分享

    我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...

  3. BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  4. 第3天:CSS浮动、定位、表格、表单总结

    今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...

  5. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  6. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  7. Unit01: Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单

    Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...

  8. 13、Semantic-UI之表格与表单

    13.1 定义基础样式表格   在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...

  9. 框架,表格,表单元素,css基础以及基本标签的结合

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

随机推荐

  1. ASP.NET配置Ueditor编辑器上传图片路径

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  2. 转-Spring单例模式与线程安全

    问题背景 这段时间在做项目的时候,考虑到Spring中的bean默认是单例模式的,那么当多个线程调用同一个bean的时候就会存在线程安全问题.如果是Spring中bean的创建模式为非单例的,也就不存 ...

  3. canvas判断边距,反弹和拖拽的综合实例

    效果如图所示,可以实现精准拖拉和触界反弹 var canvas = document.getElementById("canvas"); var cxt = canvas.getC ...

  4. Timer定时任务

    // main方法 public static void main(String[] args) { timerEnter(); } // 设定指定任务task在指定延迟delay后进行固定延迟per ...

  5. spring mvc mybatis 搭建 配置文件信息

    参考地址:http://blog.csdn.net/fox_lht/article/details/16952683 shiro集成:http://www.cnblogs.com/miskis/p/5 ...

  6. 【BZOJ 2301】【HAOI 2011】Problem b

    今天才知道莫比乌斯反演还可以这样:$$F(n)=\sum_{n|d}f(d) \Rightarrow f(n)=\sum_{n|d}\mu(\frac{d}{n})F(d)$$我好弱,,,对于$$F( ...

  7. js-处理金额(正则表达式)

    function checkRates(str){ var re = /^(([1-9][0-9]*\.[0-9][0-9]*)|([0]\.[0-9][0-9]*)|([1-9][0-9]*)|([ ...

  8. 如何提高redmine的访问速度

    刚开始使用redmine时 方法一: 可以采用nginx+passenger的方式来驱动redmine提升访问速度,但是在新建问题或更新问题时变得非常慢,这是因为在新建问题和更新问题时会发送邮件,而且 ...

  9. Java多线程与并发库高级应用-传统定时器技术回顾

    传统定时器技术回顾(jdk1.5以前) public class TraditionalTimerTest { static int count = 0; public static void mai ...

  10. [日常训练]常州集训day7

    T1 Description 给定一个序列,初始为空.依次将$1-n$插入序列,其中$i$插到当前第$a_i$个数的右边($a_i=0$表示插到序列最左边).求最终序列. Input 第一行一个整数$ ...