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. IIS部署FTP服务器步骤

    本文介绍如何在IIS中部署FTP服务端.首先确认windows开启了ftp功能:确认方法:进入控制面板->程序->打开或关闭windows功能如下图所示: 确认FTP勾选 确认后打开IIS ...

  2. Dijkstra算法and Floyd算法 HDU 1874 畅通工程续

    Dijkstra算法描述起来比较容易:它是求单源最短路径的,也就是求某一个点到其他各个点的最短路径,大体思想和prim算法差不多,有个数组dis,用来保存源点到其它各个点的距离,刚开始很好办,只需要把 ...

  3. Linux命令之进程的管理

    1.进程介绍 进程的分类: 进程一般分为交互进程.批处理进程和守护进程三类. 守护进程总是活跃的,一般是后台运行,守护进程一般是由系统在开机时通过脚本自动激活启动或由超级管理用户root来启动.比如在 ...

  4. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  5. C#进程启动实例

    1.调用widnows资源管理器打开文件夹 private void OpenFolder(string folder) { System.Diagnostics.Process.Start(&quo ...

  6. java socket报文通信（三）java对象和xml格式文件的相互转换

    前两节讲了socket服务端,客户端的建立以及报文的封装.今天就来讲一下java对象和xml格式文件的相互转换. 上一节中我们列举了一个报文格式,其实我们可以理解为其实就是一个字符串.但是我们不可能每 ...

  7. jQuery旋转插件

    jQuery旋转插件,支持Internet Explorer 6.0 + .Firefox 2.0.Safari 3.Opera 9.Google Chrome,高级浏览器下使用Transform,低 ...

  8. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

  9. php引用传值

    isset();判读值是否值在 unset();取消变量 <?php$a=array("a","b","c");$b=$a;$b[2] ...

  10. S_OK与S_FALSE，E_FAIL

    S_OK是COM服务器返回正确 S_FALSE是COM服务器返回错误,不过这个错误是可以不处理的,不影响程序正常运行.只是结果不是想要的 E_FAIL是必须处理的错误. //// Success co ...