1、表格的初步优化

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

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

 </head>

 <body>

       <table id="tb">

          <tr>

             <th>姓名</th>

             <th>年龄</th>

             <th>性别</th>

          </tr>

          <tr>

             <td>小王</td>

             <td></td>

             <td>男</td>

          </tr>

          <tr>

             <td>小王</td>

             <td></td>

             <td>男</td>

          </tr>

          <tr>

             <td>小王</td>

             <td></td>

             <td>男</td>

          </tr>

          <tr>

             <td>小王</td>

             <td></td>

             <td>男</td>

          </tr>

       </table>

 </body>

 </html>

MyCss6.css

 #tb,tr,th,td{

     border: 1px solid blue;

     text-align: center;

     background-color: aqua;

 }

 #tb{

     width:400px;

     height:400px;

     border-collapse: collapse;

 }

效果：

2、表格的进一步优化：

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

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

 </head>

 <body>

       <table id="tb">

          <tr>

             <th>姓名</th>

             <th>年龄</th>

             <th>性别</th>

          </tr>

          <tr>

             <td>小王</td>

             <td></td>

             <td>男</td>

          </tr>

          <tr class="alt">

             <td>小王</td>

             <td></td>

             <td>男</td>

          </tr>

          <tr>

             <td>小王</td>

             <td></td>

             <td>男</td>

          </tr>

          <tr class="alt">

             <td>小王</td>

             <td></td>

             <td>男</td>

          </tr>

       </table>

 </body>

 </html>

css:

 #tb{

     border-collapse: collapse;

     width:500px;

 }

 #tb td,#tb th{

     border:1px solid bisque;

     padding: 5px;

 }

 #tb th{

     text-align: right;

     background-color: aqua;

     color: #FFFFFF;

 }

 #tb tr.alt td{

     color:black;

     background-color: aquamarine;

 }

效果：

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. css样式 -- 表格不会因为字体过长导致字体溢出的问题

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

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

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

  5. 三、CSS样式——表格

    1.CSS表格 CSS表格属性可以帮助我们极大的改善表格的外观 2.表格边框 3.折叠边框 4.表格宽高 5.表格文本对齐 6.表格内边距  7.表格颜色 <!--index.html--> ...

  6. CSS样式表优化

    前几天公司要模仿一家客户的网站模板来为另一客户新建一个模板,说白了就是换个数据源,然后样式表再小修小改一下就行了.但通过浏览器控制台下载素材时,发现这个网站开发的挺专业的,单就样式表而言,代码工整,注 ...

  7. css样式--表格

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

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

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

  9. 表格CSS样式美化

    1. 单像素边框CSS表格 这是一个很常用的表格样式. <!-- CSS goes in the document HEAD or added to your external styleshe ...

随机推荐

  1. 【Android】无限滚动的HorizontalScrollView

    这是一个很简单的功能,作为新手,做一下笔记.也给其它有需要的人提供一个参考. 首先HorizontalScrollView都知道用途了.它可以实现类似“桌面程序”左右切换页的效果.一般情况下里面的页数 ...

  2. linux下常用基本命令操作

    #fdisk -l 查看硬盘信息 cat /proc/cpuinfo 查看CPU信息 free -m 查看内存信息 ethtool eth0 查看网卡信息 df -h 查看硬盘各分区可用空间大小 ca ...

  3. HTML5新增的属性和废除的属性

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

  4. android获取在res文件下的图片资源

    //得到该图片的id(name 是该图片的名字,"drawable" 是该图片存放的目录,getPackageName()是应用程序的包) int resID = getResou ...

  5. Domino 8.5 WebService开发一例

    原文地址:Domino 8.5 WebService开发一例作者:bj木棉 需求是要调用一个Domino上的WebService/JAVA来实现与人事管理系统里的人员同步,就是在人事管理系统中增加用户 ...

  6. 数据库（批处理， 事务，CachedRawSetImpl类

    链接对象son产生的Statement SQL对象对数据库提交的任何一条语句都会被立刻执行 不方便我们进行一些连招操作 我们可以关闭它的自动提交,然后操作完再开,这过程称作事务 con.setAuto ...

  7. [转]简述volatile

    volatile int i=10; int j = i; ... int k = i; volatile 告诉编译器i是随时可能发生变化的,每次使用它的时候必须从i的地址中读取,因而编译器生成的可执 ...

  8. Android开发之InstanceState详解(转）

    本文来自:http://www.cnblogs.com/hanyonglu/archive/2012/03/28/2420515.html 本文介绍Android中关于Activity的两个神秘方法: ...

  9. 记一次 nginx 504 Gateway Time-out

    今天程序在执行一项excel导出任务的时候 出现了nginx超时的提示 nginx 504 Gateway Time-out 排查过程: 查看该任务 发现内容是一个数据量20000条信息 每条信息有5 ...

  10. redis php

    redis php 学习1.连接$redis = new redis();$result = $redis->connect('127.0.0.1',6379); 2.set$redis = n ...