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. 再探Java基础——String.format(String format, Object… args)的使用

    最近看到类似这样的一些代码:String.format("参数%s不能为空", "birthday"); 以前还没用过这功能不知咐意思,后研究了一下,详细讲解如 ...

  2. Android中使用ListView绘制自定义表格(2)

    上回再写了<Android中使用ListView绘制自定义表格>后,很多人留言代码不全和没有数据样例.但因为项目原因,没法把源码全部贴上来.近两天,抽空简化了一下,做了一个例子. 效果图如 ...

  3. 阿里云ECS安全改造：改用AWS EC2私钥方式登录

    阿里云ECS有多烂,用过AWS的人都知道,ECS有什么问题呢,简单总结一下: 1)ubuntu居然root直接访问 2)端口全开 3)WEB控制台无法定义安全组及关闭端口 4)云盾黑洞 的确用起来很糟 ...

  4. 向量的叉积 POJ 2318 TOYS & POJ 2398 Toy Storage

    POJ 2318: 题目大意:给定一个盒子的左上角和右下角坐标,然后给n条线,可以将盒子分成n+1个部分,再给m个点,问每个区域内有多少各点 这个题用到关键的一步就是向量的叉积,假设一个点m在 由ab ...

  5. jdbc连接数据库和jdbc-odbc桥接方式连接数据库

    //这种方式为jdbc直接连接,需要添加jar文件 1 package com.howe2; import java.sql.*; public class test2 { public static ...

  6. Linux UDP严重丢包问题的解决

    测试系统在Linux上的性能发现丢包率极为严重,发210000条数据,丢包达110000之巨,丢包率超过50%.同等情形下Windows上测试,仅丢几条数据.形势严峻,必须解决.考虑可能是因为协议栈B ...

  7. 小学生之Oracle分析函数

    分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计值. 分析函数和聚合函数的不同 ...

  8. pointer-events属性

    pointer-events的风格更像JavaScript,它能够: 1.阻止用户的点击动作产生任何效果.阻止缺省鼠标指针的显示3.阻止CSS里的hover和active状态的变化触发事件4.阻止Ja ...

  9. VS2013默认快捷键

    目录: Global 分析 调试器上下文菜单 体系结构 调试器上下文菜单 生成 诊断中心 类视图上下文菜单 Edit 调试 编辑器上下文菜单 文件 项目和解决方案上下文菜单 帮助 重构 负载测试 解决 ...

  10. 1.tomcat部署项目的几种方式和weblogic部署方式及一点通讯

      第一种部署方式: 直接使用myeclipse 找到server服务 添加要部署的项目Add Deployment ,然后选中某个项目,首选Exploded Archive(development ...