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. Codeforces1100F. Ivan and Burgers（离线+线性基）

    题目链接:传送门 思路: 按查询的右端点离线. 然后从左到右维护线性基. 每个基底更新为最右边的方案,可以让尽量多的查询享受到这个基底. 用ci维护后更新右端点为i的答案. 代码(析构1000ms,别 ...

  2. adb环境配置+常用adb命令+Logcat命令的用法+手动进行文件比对的方法+批量挪bug

    1. adb环境配置:下载adb环境变量包:打开计算机属性-高级系统设置-环境变量:新建变量adb,值为刚才的环境变量包路径:编辑path值,在最后面加上;%adb%;确定就妥了 2. 常用adb命令 ...

  3. CMDB-实现的几种方式

    CMDB的用处:手机服务器的元信息 LINUX基础指令 查看IP地址 : ifconfig 查看主机名: hostname 查看CUP信息: cat /proc/cpuinfo 查看磁盘信息 : df ...

  4. Linux安装MySQL_5.6

    E&T: CentOS_7.4 64位; mysql-5.6.42-linux-glibc2.12-x86_64.tar; Xftp5; Xshell5; P1.下载Linux环境下的MySQ ...

  5. centos 终端字体错位个别字母中间有间隔的解决

    问题描述: linux系统:centos 终端:图形界面终端,通过startx启动 现象:通过终端输入的字体有重叠,字母之间的间隔也很大.由于字体安装不正确导致. 解决方法:通过下面字体的安装命令可以 ...

  6. 创建一个dynamics 365 CRM online plugin (八) - 使用Shared Variables 在plugins 之前传递data

    CRM 可以实现plugin之前的值传递. 我们可以使用SharedVariables 把值在plugin之间传递 实现plugins之间的传递非常简单,我们只需要用key value pair来配对 ...

  7. salt+jenkins+gitlab+ecs构建公司部署平台

    1.网络架构图如下 2.采用这种方案的原因 1.现网机器都在各个省机房内网,或者堡垒机内部.无法直接从公司总部ssh到各个现网机器 2.现网机器可以访问到公网.因此可以从公网下载制作的tar包 3.每 ...

  8. 关于让simulink中display组件显示二进制的方法

    关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...

  9. Winform 窗体实现圆角展示

    触发窗体的Resize事件,如下所示: #region 界面实现圆角 private void LoginForm_Resize(object sender, EventArgs e) { if (t ...

  10. 使用密钥登录CentOS系统（基于密钥的认证）

    在Window客户端有多种软件可以登陆ssh,比如putty,xshelll,secureCRT,我就以xshell为例设置使用公钥和私钥验证登陆服务器. 使用Xshell密钥认证机制远程登录Linu ...