1、CSS表格

　　CSS表格属性可以帮助我们极大的改善表格的外观

2、表格边框

3、折叠边框

4、表格宽高

5、表格文本对齐

6、表格内边距

 7、表格颜色

 <!--index.html-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <table id="tb">

         <tr>

             <th>姓名</th>

             <th>年龄</th>

             <th>性别</th>

         </tr>

         <tr>

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

         <tr>

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

         <tr>

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

     </table>

 </body>

 </html>
 /*style.css*/

 #tb,tr,th,td{

     border: 1px solid blueviolet;

     text-align: center;

     background-color: red;

 }

 #tb{

     width: 400px;

     height: 400px;

     border-collapse: collapse;

     /*!*将两条边框合并成一条边框*!*/

 }

 <!--index.html-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <table id="tb">

         <tr>

             <th>姓名</th>

             <th>年龄</th>

             <th>性别</th>

         </tr>

         <tr class="alt">

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

         <tr>

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

         <tr class="alt">

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

     </table>

 </body>

 </html>
 #tb{

     border-collapse: collapse;

     width: 500px;

 }

 #tb td,#tb th{

     border: 1px solid darkolivegreen;

     padding: 5px;

 }

 #tb th{

     text-align: left;

     background-color: blueviolet;

     color: white;

 }

 #tb tr.alt td{

     color: black;

     background-color: aqua;

 }

三、CSS样式——表格的更多相关文章

  1. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

  2. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  3. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  4. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  5. css样式 -- 表格不会因为字体过长导致字体溢出的问题

    常常碰到因为表格大小就麽大了,字体过长会爆炸溢出的问题,我们后端就用这个可以了,溢出的可以省略号 ... 代替好了. /* 在表格css样式加上这三个就可以了 效果就会变成 “abc...” */ { ...

  6. LODOP打印超文本字符串拼接2 单选选择css样式表格

    之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodo ...

  7. css样式-表格优化

    1.表格的初步优化 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. css样式--表格

    1.示例源码 <!DOCTYPE html><html><head><meta charset="utf-8"> <title ...

  9. css样式表格边框1px hover时为2px 实现方式

    //css .flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:r ...

随机推荐

  1. XAF创建一个DashBoard

    1.首先启动windows程序之后点击DashBoard导航栏 2.接着点击新建按钮,开始创建一个DashBoard 3.接着根据你的数据来源选择数据源,这里我选择了数据库 4.接着填好你的服务器和数 ...

  2. maven web工程 解决了pom.xml报错之后，maven web工程还是有个红色的叉叉 解决

    这里之前有个红色叉叉 改完了pom.xml文件之后需要:右键工程-MavenMyEclipse-Update Project 刷新Maven web 工程,即可解决此问题

  3. 第二次实验：CC2530平台上GPIO组件的TinyOS编程

    实验二 CC2530平台上GPIO组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生理解和掌握CC2530的GPIO及外部中断,及其TinyOS编程方法 学 ...

  4. 那些年,很多人没看懂的Python内置函数

    Python之所以特别的简单就是因为有很多的内置函数是在你的程序"运行之前"就已经帮你运行好了,所以,可以用这个的特性简化很多的步骤.这也是让Python语言变得特别的简单的原因之 ...

  5. 谷歌chrome浏览器vue调试工具vue-devtools的安装

    先导 vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率.帮助我们快速的调试开发vue应用. 第一步: 我们可以先从git ...

  6. Event对象中的target属性和currentTarget属性的区别

    先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...

  7. dispatherServlet拦截所有请求，但是不拦截JSP和其他配置的servelt

    不是顺序问题,是就不拦截Servlet 不是load-on-startup启动先后顺序问题,是就是不拦截Servlet. SpringMVC默认用的是第二个 //<url-pattern> ...

  8. mysql 生成时间序列数据 - 存储过程

    由于时间自动转换为int值, 做一步转化,也可在调用时处理 use `test`; CREATE table test.test1 as SELECT state, id, `规格条码`, `色号条码 ...

  9. 在windows系统上使用pip命令安装python的第三方库

    在windows系统上使用pip命令安装python的第三方库 通过cmd启动命令行后,直接输入pip命令,有时候命令行会提示我们pip不是一个指令,这个时候我们可以通过python的集成开发环境里面 ...

  10. FPGA调试技巧

    FPGA调试技巧 八月,一直在debug, 编译,查信号,几乎没机会,也没心思停留下来看点东西,静心思考,做点笔记.今天,在硬盘上翻到了保存已久,但一直没想起来读的一本手册.这是我初入职场,决定从硬件 ...