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. 20M宽带的网速等价于多少？

    最近有朋友问我:我家的宽带是20兆的,怎么网速这么慢? 运营商说的20M,完整的单位应该是20Mbps(bps:比特率),而日常中所说的下载速度单位是MB,两者是不一样的. 它们之间的换算关系是:1M ...

  2. 队列（链式存储）JAVA代码

      publicclassLinkQueue<T>{       //结点类     publicclassNode{         public T data;         pub ...

  3. AsyncTask两种线程池

        AsyncTask两种线程池  http://bbs.51cto.com/thread-1114378-1.html (API 3.0以后): 1．THREAD_POOL_EXECUTOR, ...

  4. Linux服务的管理

    1.Linux服务的介绍 系统服务 --某些服务的服务的对象是Linux系统本身,或者Linux系统系统用户,这类服务我们称为系统服务(System Service) 网络服务 --提供给网络中的其他 ...

  5. Html.RenderAction简单用法

    一 Html.ActionLink("actionName") 调用页与当前页位于同一个控制器,可直接调用,显示对应的视图 二 Html.ActionLink("acti ...

  6. [Linux]三种方案在Windows系统下安装ubuntu双系统（转）

    在学习linux的过程中,ubuntu无疑是初学者的最佳选择. 下面来列举给Windows系统安装ubuntu双系统的三种方法. 一.虚拟机安装(不推荐) 使用工具:Vmware 如果不是因为迫不得已 ...

  7. javascript基础之变量和函数声明

    1.变量的声名 window.name = 'gjlin' ; //全局变量  直接name = 'gjlin'  也表示全局变量,但是建议使用window.name = 'gjlin' 这种形式表示 ...

  8. java 使用正则表达式对文件名非法字符处理

    1.文件名在操作系统中不允许出现  / \ " : | * ? < > 故将其以空替代       Pattern pattern = Pattern.compile(" ...

  9. 【C++学习之路】派生类的构造函数（一）

    一.简单派生类的构造函数 1.所谓简单派生类,就是指派生类中不包含基类的内嵌对象的派生类. 2.一般来说,这样的派生类的构造函数的形式是: student( int i, string nam, in ...

  10. [转]《深度探索C++对象模型》读书笔记[二]

    3.3 Data Member的存取1．   不管什么情况,每一个static data member只有一个实体,放在程序的data segment之中,每次程序取用static member,不管 ...