如果就向下面的代码那样，不写 tbody ， 则浏览器自添加 tbody ， 并将所有的 tr 移入 tbody

意味着 tr 并非 table 的子元素，而是 tbody 的子元素。

所以 以后编写代码，尽可能地写上 tbody，防止混淆。

th 表头

是特殊的 td

“具有加粗，文字居中”的效果 。

为 table 添加边框：

1. 为 th，td 设置 border: 1px red solid;

2. 为 table 设置 /* 单元格之间的距离。*/

border-spacing: 0px;


3. 为 table 设置 /* 表格的边框合并。设置以后 border-spacing 自动失效*/

border-collapse: collapse;

关于行的 隔行变色 及 悬浮变色

css代码：

@charset "utf-8";

*{

    margin: 0px;

    padding: 0px;

}

body{

    background-color: #3e4e54;

}

table{

    margin: 0px auto;

    width: 40%;

    /* 单元格之间的距离。*/

    border-spacing: 0px;

    /* 表格的边框合并。设置以后 border-spacing 自动失效*/

    border-collapse: collapse;

}

#mytb th,td{

    border: 1px red solid;

}

/* 隔行变色 IE8 及以下不支持 :nth-child() */

tr:nth-child(even){

    background-color: #666;

}

/* 悬浮变色 IE6及以下不支持 a 以外的元素使用 :hover */

tr:hover{

    background-color: #bfc;

}

html代码：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>表格</title>

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

    </head>

    <body>

        Hello Web!`    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        table 是<b>块元素</b>，独占一行

        <table id="mytb">

            <tr>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

            </tr>

            <tr>

                <td>刘备</td>

                <td>35</td>

                <td>男</td>

            </tr>

            <tr>

                <td>关羽</td>

                <td>33</td>

                <td>男</td>

            </tr>

            <tr>

                <td>张飞</td>

                <td>30</td>

                <td>男</td>

            </tr>

            <tr>

                <td>唐僧</td>

                <td>27</td>

                <td>男</td>

            </tr>

            <tr>

                <td>孙悟空</td>

                <td>633</td>

                <td>男</td>

            </tr>

            <tr>

                <td>猪八戒</td>

                <td>830</td>

                <td>男</td>

            </tr>

            <tr>

                <td>沙悟净</td>

                <td>735</td>

                <td>男</td>

            </tr>

            <tr>

                <td>白龙马</td>

                <td>533</td>

                <td>男</td>

            </tr>

            <tr>

                <td>白骨精</td>

                <td>130</td>

                <td>女</td>

            </tr>

            <tr>

                <td>蜘蛛精</td>

                <td>135</td>

                <td>女</td>

            </tr>

            <tr>

                <td>金角大王</td>

                <td>430</td>

                <td>男</td>

            </tr>

            <tr>

                <td>东海龙王</td>

                <td>3000</td>

                <td>男</td>

            </tr>

        </table>

    </body>

</html>

__x__(40)0909第五天__表格 table 的 css 样式 美化的更多相关文章

  1. __x__(39)0909第五天__ 表格 table

    表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> < ...

  2. __x__(41)0909第五天__长表格

    长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...

  3. __x__(37)0909第五天__背景图按钮

    link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...

  4. __x__(38)0909第五天__雪碧图的制作

    1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .

  5. 表格CSS样式美化

    1. 单像素边框CSS表格 这是一个很常用的表格样式. <!-- CSS goes in the document HEAD or added to your external styleshe ...

  6. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  7. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  8. __x__(31)0908第五天__导航条的练习 <ul> 版本

    效果图:  html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...

  9. __x__(34)0908第五天__ 定位 position

    position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 ...

随机推荐

  1. JVM调优命令-jhat

    jhat JVM Heap Analysis Tool命令是与jmap搭配使用,用来分析jmap生成的dump,jhat内置了一个微型的HTTP/HTML服务器,生成dump的分析结果后,可以在浏览器 ...

  2. 用 python 写一个年会抽奖小程序

    使用 pyinstaller 打包工具常用参数指南 pyinstaller -F demo.py 参数 含义 -F 指定打包后只生成一个exe格式的文件 -D –onedir 创建一个目录,包含exe ...

  3. PyQt5开发环境搭建

    一 写在开头1.1 本节内容开个新坑—“PyQt5系列”,慢慢填.本文主要内容为PyQt5开发环境的搭建. 注意:PyQt 5.10以上的版本在Python 3.6中有BUG,PyQt 5.10版本是 ...

  4. JavaScript Date日期对象以及日期格式化方法

    前言 Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口.Date对象是在早期java中的java.util.Date类基础上创建的,为此,Date类型使用自UTC1 ...

  5. 携程apollo系列-个人开发环境搭建

    本博客讲详细讲解如何在 Windows 搭建携程 Apollo 服务器 (用户个人开发). 开发服务器有多种搭建方式:(1) docker, 搭建过程非常简单, 推荐有 docker 环境(2) 部署 ...

  6. sessionStorage数组、对象的存储和读取

    一个对象的demo如下: var obj = { name:"name", age:18, love:"美女" } sessionStorage.setItem ...

  7. 《尚学堂_史上最易懂的设计模式视频》--章节3 Iterator迭代 模拟列表

    广州尚学堂官网-|广州Java培训|Java培训机构|人工智能+Python培训|PHP培训|全栈工程师培训|UI设计培训|前端移动开发培训http://www.gzsxt.cn/ ==Iterato ...

  8. JS禁用浏览器退格键、禁止右键、禁止全选、复制、粘贴

    一.禁用浏览器退格键 摘抄自:https://www.cnblogs.com/wanggd/p/3164536.html 我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说 ...

  9. [51nod1965]奇怪的式子

    noteskey 怎么说,魔性的题目...拿来练手 min_25 正好...吧 首先就是把式子拆开来算贡献嘛 \[ANS=\prod_{i=1}^n \sigma_0(i)^{\mu(i)} \pro ...

  10. 【原创】运维基础之Zabbix（1）简介、安装、使用

    zabbix 4 官方:https://www.zabbix.com/ 一 简介 Monitor anythingSolutions for any kind of IT infrastructure ...