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. Django_ORM相关操作

    一般的操作 1.all():查询所有的结果 2.filter():包含与所有筛选条件匹配的对象 3.get():返回与所给筛选条件相匹配的对象,返回结果有且只有一个,如果对象没有或者超过一个会报错 4 ...

  2. Swift中enum, struct, class的有关使用方法

    import Foundation print("Hello, World!") let a = var b = var c = a + b; c = //重载:函数名相同, 函数 ...

  3. HTML5-全局属性

    HTML5-全局属性 HTML 属性赋予元素意义和语境.全局属性可用于任何 HTML 元素. contentEditable - 规定元素内容是否可编辑.- 注释:如果元素未设置 contentedi ...

  4. Ubuntu使用总结一

    一.安装 Ubuntu桌面版与服务器版的不同之处桌面版面向个人电脑使用者,可以进行文字处理.网页浏览.多媒体播放和玩游戏.本质上说,这是一 个为普通用户所定制的多用途操作系统.另一方面,服务器版旨在充 ...

  5. Python之PIL库的运用、GIF处理h

    一.PIL库简介 PIL(Python Image Library)库是Python语言的第三方库,它支持图像存储.显示和处理,它能够处理几乎所有图片格式,可以完成对图像的缩放.剪裁.折叠以及像图片添 ...

  6. Spark源码系列:RDD repartition、coalesce 对比

    在上一篇文章中 Spark源码系列:DataFrame repartition.coalesce 对比 对DataFrame的repartition.coalesce进行了对比,在这篇文章中,将会对R ...

  7. 【转】linux scp远程拷贝文件及文件夹

    转自:http://www.jb51.net/LINUXjishu/73131.html 1.拷贝本机/home/administrator/test整个目录至远程主机192.168.1.100的/r ...

  8. MySQL：ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'

    ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'. 原因是:mysql数据库的user表里,存 ...

  9. VS 自动展开选中当前代码所在的文件位置的功能

    这个功能相当好,自动在Solution Explorer中展开并定位到当前代码所在的文件,免得自己找位置要找很久. 设置方法: tool>>options>>projects ...

  10. CentOS 7 install Tensorflow-gpu

    # install TensorFlow GPU on CentOS 7.0# https://www.server-world.info/en/note?os=CentOS_7&p=tens ...