1、CSS表格

　　CSS表格属性可以帮助我们极大的改善表格的外观

2、表格边框

3、折叠边框

4、表格宽高

5、表格文本对齐

6、表格内边距

 7、表格颜色

 <!--index.html-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

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

 </head>

 <body>

     <table id="tb">

         <tr>

             <th>姓名</th>

             <th>年龄</th>

             <th>性别</th>

         </tr>

         <tr>

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

         <tr>

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

         <tr>

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

     </table>

 </body>

 </html>
 /*style.css*/

 #tb,tr,th,td{

     border: 1px solid blueviolet;

     text-align: center;

     background-color: red;

 }

 #tb{

     width: 400px;

     height: 400px;

     border-collapse: collapse;

     /*!*将两条边框合并成一条边框*!*/

 }

 <!--index.html-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

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

 </head>

 <body>

     <table id="tb">

         <tr>

             <th>姓名</th>

             <th>年龄</th>

             <th>性别</th>

         </tr>

         <tr class="alt">

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

         <tr>

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

         <tr class="alt">

             <td>小王</td>

             <td>02</td>

             <td>男</td>

         </tr>

     </table>

 </body>

 </html>
 #tb{

     border-collapse: collapse;

     width: 500px;

 }

 #tb td,#tb th{

     border: 1px solid darkolivegreen;

     padding: 5px;

 }

 #tb th{

     text-align: left;

     background-color: blueviolet;

     color: white;

 }

 #tb tr.alt td{

     color: black;

     background-color: aqua;

 }

三、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. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  4. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  5. css样式 -- 表格不会因为字体过长导致字体溢出的问题

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

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

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

  7. css样式-表格优化

    1.表格的初步优化 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. css样式--表格

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

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

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

随机推荐

  1. 安装ruby及sass

    下载 ruby安装包,安装后,进入: 输入: gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ ...

  2. postman导入csv文件，批量运行

    1.设置csv文件,第一行必须标明变量名 2.postman参数化设置 3.批量 run即可

  3. ionic2简单分析

    Angular2是一个全新的框架,它从ReactJS以及其他web移动框架借鉴了不少经验和优点,巨大的改进使得开 发体验和性能已经超越了Angular1,而且Ionic2无论是从UI交互效果和跨平台的 ...

  4. 最详细最权威的Android 编码规范

    1. 前言 这份文档参考了 Google Java 编程风格规范和 Google 官方 Android 编码风格规范.该文档仅供参考,只要形成一个统一的风格,见量知其意就可. 1.1 术语说明 在本文 ...

  5. c/c++的常用函数和STL使用

    一个超好用的c++网站:http://www.cplusplus.com/reference/string/string/erase/ 一.函数头中包含的函数 1.qsort函数对数组.结构体等进行排 ...

  6. centos tree 命令

    ftp://mama.indstate.edu/linux/tree/ download & make

  7. Hi3519V101+IMX274开发板调试经验

    1.uboot没换 2.内核网络不对,其它的正常, sudo apt-get install libncurses5-dev sudo apt-get install u-boot-tools 3.根 ...

  8. flutter 容器 几种写法

    1.Stack: 取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下 ...

  9. Dev GridControl数据修改后实时更新数据源（转）

    1:  /// <summary> 2:  /// 嵌入的ComboxEdit控件选择值变化事件 3:  /// </summary> 4: /// <param nam ...

  10. 【转】对象克隆（C# 快速高效率复制对象另一种方式 表达式树）

    原文地址:https://www.cnblogs.com/lsgsanxiao/p/8205096.html 1.需求 在代码中经常会遇到需要把对象复制一遍,或者把属性名相同的值复制一遍. 比如: p ...