1、表格的初步优化

index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.       <link href="style6.css" type="text/css" rel="stylesheet">
  7.  </head>
  8.  <body>
  9.  
  10.        <table id="tb">
  11.           <tr>
  12.              <th>姓名</th>
  13.              <th>年龄</th>
  14.              <th>性别</th>
  15.           </tr>
  16.           <tr>
  17.              <td>小王</td>
  18.              <td></td>
  19.              <td>男</td>
  20.           </tr>
  21.           <tr>
  22.              <td>小王</td>
  23.              <td></td>
  24.              <td>男</td>
  25.           </tr>
  26.           <tr>
  27.              <td>小王</td>
  28.              <td></td>
  29.              <td>男</td>
  30.           </tr>
  31.           <tr>
  32.              <td>小王</td>
  33.              <td></td>
  34.              <td>男</td>
  35.           </tr>
  36.  
  37.        </table>
  38.  </body>
  39.  </html>

MyCss6.css

  1.  #tb,tr,th,td{
  2.      border: 1px solid blue;
  3.      text-align: center;
  4.      background-color: aqua;
  5.  }
  6.  #tb{
  7.      width:400px;
  8.      height:400px;
  9.      border-collapse: collapse;
  10.  }

效果：

2、表格的进一步优化：

index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.       <link href="style6.css" type="text/css" rel="stylesheet">
  7.  </head>
  8.  <body>
  9.  
  10.        <table id="tb">
  11.           <tr>
  12.              <th>姓名</th>
  13.              <th>年龄</th>
  14.              <th>性别</th>
  15.           </tr>
  16.           <tr>
  17.              <td>小王</td>
  18.              <td></td>
  19.              <td>男</td>
  20.           </tr>
  21.           <tr class="alt">
  22.              <td>小王</td>
  23.              <td></td>
  24.              <td>男</td>
  25.           </tr>
  26.           <tr>
  27.              <td>小王</td>
  28.              <td></td>
  29.              <td>男</td>
  30.           </tr>
  31.           <tr class="alt">
  32.              <td>小王</td>
  33.              <td></td>
  34.              <td>男</td>
  35.           </tr>
  36.  
  37.        </table>
  38.  </body>
  39.  </html>

css:

  1.  #tb{
  2.      border-collapse: collapse;
  3.      width:500px;
  4.  }
  5.  #tb td,#tb th{
  6.      border:1px solid bisque;
  7.      padding: 5px;
  8.  }
  9.  #tb th{
  10.      text-align: right;
  11.      background-color: aqua;
  12.      color: #FFFFFF;
  13.  }
  14.  #tb tr.alt td{
  15.      color:black;
  16.      background-color: aquamarine;
  17.  }

效果：

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. yii cgridview 对生成的数据进行分页

    这个其实最简单 在对应的model里找Search方法 找到后,参见如下代码 public function search() { // @todo Please modify the followi ...

  2. MVC的Model层中的一些便签

    由于自己重新接触MVC,所以把Model层里的一些标签给记录下来,方便自己的使用. 这些是自己目前试用过的一些,在以后的工作中我会接着补充进去新的内容

  3. FFMPEG 视频旋转设置

    fmpeg -i inputfile.mp4 -vf "transpose=1" outputfile.mp4 0=90CounterCLockwise and Vertical ...

  4. 不容错过的20段CSS代码

    Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 分享20段非常专业的CSS2/CSS3 ...

  5. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. angularjs中ng-attr的用法

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  7. 使用 phpMyAdmin无法登录mysql的问题

    今天使用使用phpmyadmin时出现了以下错误: (1)第一次时: 当配置文件config.inc.php里的配置项是: $cfg['Servers'][$i]['host'] = 'localho ...

  8. javascript 正则匹配手机号码

      <form class="form-horizontal" name="mobileform" style="padding:10px;&q ...

  9. PHP文章管理（2）

    ##############index.php######################  <?session_start();  require"./inc/func.php&qu ...

  10. 微软office MIME类型

      后缀 MIME 類型 .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document .docm app ...