#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. TETELaser Cutting System 不连续吹起的问题

    TETELaser Cutting System 不连续吹起的问题    :配置 加工参数-->机器参数-->信号灯和激光器报警:黄灯索引==EX14   红灯索引==EX15 绿灯索引= ...

  2. "HK"日常之用C# Process写一只小病毒

    众所周知,Process可以启动和关闭电脑上的进程,命名空间位于 System.Diagnostics,本次的教程就是利用其中的GetProcesses和Kill方法来实现的. 一.编码工作 首先我们 ...

  3. Painter's Problem poj1681 高斯消元法

    Painter's Problem Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4420   Accepted: 2143 ...

  4. SQL server学习（三）T-SQL编程、逻辑控制语句和安全模式

    T-SQL编程 T-SQL编程与C语言类似,只是语法稍有不同而已,总体思想还是没有变化的.多的就不说了,还是从变量开始. 变量也分为全局变量和局部变量,表示方式稍有不同. 局部变量: 局部变量必须以标 ...

  5. ASP.NET没有魔法——ASP.NET MVC & 分层

    上一篇文章简要说明了MVC所代表的含义并提供了详细的项目及其控制器.视图等内容的创建步骤,最终完成了一个简单ASP.NET MVC程序. 注:MVC与ASP.NET MVC不相等,MVC是一种开发模式 ...

  6. 记住密码"功能的正确设计

    Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...

  7. SQL SERVER 查看日志大小及日志已满的处理方法 (转)

    --解决方法 --日志文件满而造成SQL数据库无法写入文件时,可用两种方法: --查看数据库日志大小 dbcc sqlperf(logspace) --清空日志. --1．打开查询分析器,输入命令 D ...

  8. 第六章 JDBC

    第一章 JDBC 一.JDBC的简介 1.什么是JDBC JDBC是java数据库连接(java database connectivity)技术的简称,它充当了java应用程序与各个不同数据库之间进 ...

  9. pseudocode of zigzag conversion

    1.Title : The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of ...

  10. C#利用String类的IndexOf、LastIndexOf、Substring截取字符串

    一.String.IndexOf String.IndexOf 方法 (Char, Int32, Int32)报告指定字符在此实例中的第一个匹配项的索引(从0开始).搜索从指定字符位置开始,并检查指定 ...