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. es5和es6实现lazyman

    es6实现 1 class _LazyMan { constructor(name) { this.tasks = []; this.sleep = this.sleep.bind(this); th ...

  2. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  3. 统计学习方法：罗杰斯特回归及Tensorflow入门

    作者:桂. 时间:2017-04-21  21:11:23 链接:http://www.cnblogs.com/xingshansi/p/6743780.html 前言 看到最近大家都在用Tensor ...

  4. .net Framework 4.5 新特性async（异步）的初步认识

    1.async的简单说明 继版本4.5以前,要想实现异步方法,运用多线程齐头并进.而4.5直接一个async修饰的方法配合await实现异步,这里的底层实现原理暂时未研究, 应该本质都一样,对线程的操 ...

  5. git 设置不需要输入密码, 去除 fetch / pull 代码每次都需要输入密码的烦恼

    https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credenti ...

  6. python自动化开发-[第一章]-练习题

    1.使用while循环输入 1 2 3 4 5 6 8 9 10 i = 1 while i < 11: if i == 7: i += 1 continue print (i) i += 1 ...

  7. Linux(ubuntu)安装MediaWiki

    本篇文档所述步骤,作者完全验证过.一切OK. 作者:http://gaoxingf.blog.51cto.com/612518/188132,Younger Liu 本作品采用知识共享署名-非商业性使 ...

  8. Display:table;妙用，使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...

  9. stl_各容器的总结

    一.stl容器总结: 1.以下的操作是在一千万的数据下操作.copy 都是在足够的空间下进行的copy, 测量方式: std::clock_t start = std::clock(); //待测代码 ...

  10. 再议Unity优化

    0x00 前言 在很长一段时间里,Unity项目的开发者的优化指南上基本都会有一条关于使用GetCompnent方法获取组件的条目(例如14年我的这篇博客<深入浅出聊Unity3D项目优化:从D ...