#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. 认识：ThinkPHP的编译缓存文件~runtime.php

    1.定义单入口文件(index.php) 在单入口index.php中不定义这两项时,会生成编译缓存文件~runtime.php define('RUNTIME_PATH','./App/Temp/' ...

  2. Dynamic Inversions 50个树状数组

    Dynamic Inversions Time Limit: 30000/15000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others ...

  3. Hive导出复杂数据到csv文件

    工作中经常遇到使用Hive导出数据到文本文件供数据分析时使用.Hive导出复杂数据到csv等文本文件时,有时会遇到以下几个问题: 导出的数据只有数据没有列名. 导出的数据比较复杂时,如字符串内包含一些 ...

  4. 【转】Python中实现远程调用（RPC、RMI）简单例子

    远程调用使得调用远程服务器的对象.方法的方式就和调用本地对象.方法的方式差不多,因为我们通过网络编程把这些都隐藏起来了.远程调用是分布式系统的基础. 远程调用一般分为两种,远程过程调用(RPC)和远程 ...

  5. 移动端分享到微信和QQ

    关于在H5页面实现分享到微信和QQ,当初做的时候由于没有做过这方面的功能,也查了很多资料,找了很多插件,试了很多方法,大部分的都是点击后出现一个二维码,这不 符合我的需求,所以在网上找了一个 nati ...

  6. c# 【MVC】WebApi设置返回Json

    public static HttpResponseMessage toJson(Object obj) { String str; if (obj is String || obj is Char) ...

  7. MYSQL 数据库高频查询语句整理

    一查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>,= ...

  8. linux 内核 zImage 生成过程分析

    1. 依据arch/arm/kernel/vmlinux.lds 生成linux内核源码根目录下的vmlinux,这个vmlinux属于未压缩,带调试信息.符号表的最初的内核,大小约23MB: arm ...

  9. Httpd2.2常见配置及功能

    Httpd 2.2常见配置 要配置http服务的配置文件,先备份一下,养成良好习惯,如果误操作导致http服务起不来,就可以将备份的主配置文件重新覆盖一下 httpd配置文件的组成:有三大部分组成,其 ...

  10. Tomcat 笔记-目录简介

    bin:启动和关闭tomcat的bat文件 conf:配置文件 server.xml该文件用于配置server相关的信息,比如tomcat启动的端口号,配置主机(Host) web.xml文件配置与w ...