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. vue插件

    Vue.js提供了插件机制,可以在全局添加一些功能.它们可以简单到几个方法.属性,也可以很复杂,比如一整套组件库. 注册插件需要一个公开的方法install,它的第一个参数是Vue构造器,第二个参数是 ...

  2. #20175120彭宇辰-实验一《Java开发环境的熟悉》实验报告

    Java开发环境的熟悉-1 实验要求:1 .建立“自己学号exp1”的目录2 .在“自己学号exp1”目录下建立src,bin等目录3 .javac,java的执行在“自己学号exp1”目录4 .提交 ...

  3. Android版本28使用http请求

    Android版本28使用http请求报错not permitted by network security policy android模拟器调试登录的时候报错 CLEARTEXT communic ...

  4. 各类排序算法的实现C#版

    using System;using System.CodeDom;using System.Collections.Generic;using System.Linq;using System.Ru ...

  5. Far manager界面混乱问题解决

    刚装完,win7和XP上运行,都是界面混乱,看到网上说是属性里改字体,改编码,我试了半天不行: 最后发现,需要far.exe创建快捷方式,在快捷方式的属性里设置字体,编码,窗口大小,废话不多说,上图: ...

  6. 游戏编程模式 Game Programming Patterns (Robert Nystrom 著)

    第1篇 概述 第1章 架构,性能和游戏 (已看) 第2篇 再探设计模式 第2章 命令模式 (已看) 第3章 享元模式 (已看) 第4章 观察者模式 (已看) 第5章 原型模式 (已看) 第6章 单例模 ...

  7. [随笔][Java][修改pom仓库库为阿里云]

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  8. Ansible 批量修改密码

    客户要求每3个月修改一次主机密码.密码规则为客服提供的一串字符 xxxx + 主机后3位. 将需要登录主机添加到 Ansible. 将需要登录主机的公钥添加到 known_hosts ssh-keys ...

  9. Where 与 Having

    WHERE在数据分组前进行过滤,HAVING在数据分组后过滤. HAVING可以对检索(或计算)出的结果过滤,WHERE则不行. WHERE.聚合函数.HAVING在from后面的执行顺序:WHERE ...

  10. Spring常用的三种注入方式

    好文要收藏,摘自:https://blog.csdn.net/a909301740/article/details/78379720 Spring通过DI(依赖注入)实现IOC(控制反转),常用的注入 ...