#tb, tb1, tr, th, td {
    border: 5px solid blue;
    /*加边框*/
    padding: 5px;
    /*内边距*/
}

#tb1 {
    border-collapse: collapse;
    /*合并边框*/
    width: 500px;
    height: 500px;
    text-align: center;
    background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格及轮廓</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<table id="tb">
    <tr class="alt">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr class="alt">
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
</table>
<br/>
<table id="tb1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
</table>
<br/>
<br/>
<p style="outline-style: groove;outline-width: 1px">文字效果实心框</p>
<br/>
<br/>
<p style="outline-style: double;outline-width: 20px">文字效果双虚线框</p>
</body>
</html>

HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表的更多相关文章

  1. HTML 学习笔记 CSS(表格)

    CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...

  2. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  3. amazeui学习笔记--css（常用组件12）--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  4. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  5. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  6. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  7. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  8. amazeui学习笔记--css（基本样式4）--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  9. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

随机推荐

  1. Delphi系列书籍pdf 118本 网友吐血整理

    第一步:进入官网首页http://bulo.hujiang.com/home/ 第二部:home/替换u/779988/diary/627936/ 来自沪江部落

  2. 一个综合实例讲解vue的基础知识点。

    本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:

  3. Ngnix技术研究系列1-通过应用场景看Nginx的反向代理

    随着我们业务规模的不断增长,整个系统规模由两年前的几十台服务器,井喷到现在2个数据中心,接近400台服务器,上百个WebApi站点,上百个域名. 这么多的WebApi站点这么多的域名,管理和维护成本很 ...

  4. Java并发/多线程系列——初识篇

    回到过去,电脑有一个CPU,一次只能执行一个程序.后来多任务处理意味着计算机可以同时执行多个程序(AKA任务或进程).这不是真的"同时".单个CPU在程序之间共享.操作系统将在运行 ...

  5. Linux命令行与脚本编程大全第一章

    1, 2,linux内核:内存管理.进程管理.文件管理.设备管理. 其中内存管理如下图: 通过命令 cat/proc/meminfo查看系统的内存状态.通过ipcs查看共享内存.信号量.消息队列信息. ...

  6. Mybatis Dynamic Query 2.0.2

    项目地址:https://github.com/wz2cool/mybatis-dynamic-query 文档地址:https://wz2cool.gitbooks.io/mybatis-dynam ...

  7. MIRO做发票校验时实现替代功能的多种方式

    http://blog.sina.com.cn/s/blog_3f2c03e30100ngje.html MIRO做发票校验时,如果需要对产生的会计凭证做某些字段的替代,可有多种方法. 1.GGB1替 ...

  8. Latex 论文elsevier，手把手如何用Latex写论文

    这几天在开始写论文,准备发的是elsevier,这个网站的instruction有问题,下载的东西基本上好多的错误,所以我就写博客记录. 首先看下:https://www.elsevier.com/a ...

  9. win10 uwp 随着数字变化颜色控件

    我朋友在做一个控件,是显示异常,那么异常多就变为颜色,大概就是下面的图,很简单 首先是一个Ellipse,然后把他的颜色绑定到Int,需要一个转换,UWP的转换和WPF差不多,因为我现在还不会转换,就 ...

  10. Android基础知识03—Activity的基本用法

    ------Activity 活动------ 活动 Activity 是一种包含用户界面的组件,即一个界面就是一个活动 创建活动的过程: >> 创建一个类,继承自Activity类,并且 ...