1.表格标签

表格标签的嵌套关系

<table>

    <!--表格头-->

    <thead>

        <!--表格行-->

        <tr>

            <!--表格列，【注意】这里使用的是th-->

            <th></th>

        </tr>

    </thead>

    <!--表格主体-->

    <tbody>

        <!--表格行-->

        <tr>

            <!--表格列，【注意】这里使用的是td-->

            <td></td>

        </tr>

        <tr>

            <td></td>

        </tr>

    </tbody>

    <!--表格底部-->

    <tfoot>

        <tr>

            <td></td>

        </tr>

    </tfoot>

</table>

2.实例演示–课程表

border-collapse:collapse; - - -表示清除表格之间的间隙

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*1.清除表格默认样式*/

            table{

                border-collapse: collapse;

            }

            th,td{

                padding: 0;

            }

            /*2.设置表格大小，以及表框颜色*/

            table{

                margin: 0 auto;

                width: 500px;

            }

            th,td{

                border: 1px solid pink;

                font: 20px/50px "微软雅黑";

                text-align: center;

            }

        </style>

    </head>

    <body>

        <!--

            表格标签

                table           表格

                thead           表格头

                tbody           表格主体

                tr              表格行

                th              表格头里的单元格(默认加粗并且居中)

                td              表格主体里的单元格

                tfoot           表格底部

            表格的默认样式

                table{border-collapse:collapse;}        单元格之间的间隙

                th,td{padding:0}

        -->

        <table cellspacing="0">

            <thead>

                <tr>

                    <th>星期一</th>

                    <th>星期二</th>

                    <th>星期三</th>

                    <th>星期四</th>

                    <th>星期五</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

3.表格行和列的合并

rowspan 合并行(竖着合并)

colspan 合并列(横着合并)

效果图：

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            table{

                border-collapse: collapse;

            }

            th,td{

                padding: 0;

            }

            table{

                margin: 0 auto;

                width: 500px;

            }

            th,td{

                border: 1px solid pink;

                font: 20px/50px "微软雅黑";

                text-align: center;

            }

        </style>

    </head>

    <body>

        <!--

            表格标签

            rowspan         合并行(竖着合并)

            colspan         合并列(横着合并)

        -->

        <table cellspacing="0">

            <thead>

                <tr>

                    <th></th>

                    <th>星期一</th>

                    <th>星期二</th>

                    <th>星期三</th>

                    <th>星期四</th>

                    <th>星期五</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td rowspan="4">    上午</td>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <!--合并行-->

                    <td rowspan="2">    下午</td>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td>语文  </td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <!--合并列-->

                    <td colspan="6">夜自习</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

配套小练习

链接地址：http://blog.csdn.net/baidu_37107022/article/details/71713520

一天搞定CSS：表格（table）--19的更多相关文章

  1. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  2. css两句话搞定漂亮表格样式

    CSS代码: table { background-color:#c0de98; width:500px; height:100px; } td { background-color:#ffffff; ...

  3. 十分钟搞定CSS选择器

    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...

  4. (转)十分钟搞定CSS选择器

    原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下 ...

  5. 一天搞定CSS（扩展）：CSS Hack

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  6. 一天搞定CSS： 标签样式初始化（CSS reset）及淘宝样式初始化代码--09

    样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...

  7. 一天搞定CSS：盒模型content、padding、border、margin--06

    1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...

  8. 一天搞定CSS：文本text--05

    1.文本体系 2.文本各属性取值 说明: 每一个属性后面的分支是属性值,以及对属性值的说明. 比如text-align- - - -有3个取值:left,center,right 3.空格大小 4.代 ...

  9. 一天搞定CSS：初识css--01

    1)CSS:层叠样式表(英文全称:Cascading Style Sheets) 是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. C ...

随机推荐

  1. 使用Java注解来简化你的代码

         注解(Annotation)就是一种标签,可以插入到源代码中,我们的编译器可以对他们进行逻辑判断,或者我们可以自己写一个工具方法来读取我们源代码中的注解信息,从而实现某种操作.需要申明一点, ...

  2. jwt token Example - Python

    0 Pre Install Python3 Install PyCrypto Install PyJWT 1 token 由三部分组成 header, payload, sign 并用逗号连接各部分 ...

  3. NodeJS+express+mogondb学习笔记01

    0.准备工作  安装nodejs环境  官网地址:https://nodejs.org/en/  下载好了 直接一路安装 也没有什么可以说的 不得不说nodejs对于新手上手还是很友好的,再加上现在n ...

  4. 【小瑕疵】表单中的button会自动提交？

    在表单中使用button标签的时候会发现,即使什么类型都没有设置,但是在点击的时候会发现,表单会自动提交 比如: 我在一个表单的button中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...

  5. 学习java分为几个阶段，分别是什么？

    多年前我自学的时候是很茫然,上网问问题,总是一堆外行的人说很难啊,你需要这样需要那样,不然就是,一堆人说一些空话,多看多写,买好书,我很无语,除了这些就没有自己的一些想法吗? 首先很多人认为学JAVA ...

  6. java设计模式--基础思想总结--父类引用操作对象

    看设计模式的相关书籍也有一段时间了,一开始其实是抱着作为java三大框架的基础知识储备来学习的,不过到后来,才发现,在设计模式的一些准则装饰下,java的面向对象威力才真正地体现出来,后面的将会陆续地 ...

  7. 懵懂oracle之存储过程

    作为一个oracle界和厨师界的生手,笔者想给大家分享讨论下存储过程的知识,因为在我接触的通信行业中,存储过程的使用还是占据了一小块的地位. 存储过程是什么?不得不拿下百度词条的解释来:"存 ...

  8. ZJOI2017 day1滚粗记

    这几天去温州作为外省选手参加了$ZJOI day1$.打了几天的酱油,考试也滚粗了.. $day -2$ 中午从学校出发,坐飞机去温州.到了温州以后吃完晚饭就回宾馆.把一直想做的糖果公园做完了以后就堕 ...

  9. [CTSC1999]【网络流24题】星际转移

    Description 由于人类对自然资源的消耗,人们意识到大约在2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知的原因,地 ...

  10. Linux IO barrier

    I/O顺序问题是一个比较综合的问题,它涉及的层次比较多,从VFS page cache到I/O调度算法,从IO子系统到存储外设.而Linux I/O barrier就是其中重要的一部分. 可能很多人认 ...