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. 3.QT5.8支持中文输入法（附带老版本的解决+不理想的情况解决）

    安装过程:http://www.cnblogs.com/dotnetcrazy/p/6725945.html 用了QT发现,中文输入法不能输入...一开始以为是输入法问题,后来发现,其他地方都可以中文 ...

  2. Evermoney -- 重新定义印象笔记编辑体验

    关于印象笔记 知识管理工具自己也算用过很多了,国内的有道,为知:国外的onenote.因为印象笔记的裁剪以及搜索功能太强大了,所以最后还是选择用印象笔记了.不过印象笔记这个公司确实态度有点不敢恭维,关 ...

  3. EF 关联数据查询

    1 直接使用表对应的实例属性值 ,如本例中的RoleUserInfo的属性UserInfo IEnumerable <RoleUserInfo > roleUserInfos= db.Ro ...

  4. C语言的一些基础

    一.C语言基础: 1.1.main函数是入口函数,用于进行link. 1.2..sln是解决方案的管理文件. 1.3.int:32位.short:16位.long:32位.long long:64位. ...

  5. Python、PyCharm的安装及使用方法（Mac版）

    上周跟朋友喝咖啡时聊起我想学Python,她恰好也有这个打算,顺便推荐了一本书<编程小白的第1本Python入门书>,我推送到Kindle后,随手翻看了下,用语平实,简洁易懂. 之前在R语 ...

  6. Java Web实现IOC控制反转之依赖注入

    控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...

  7. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  8. ⑤JS返回格式化的当前时间和上周时间

    首先对时间进行格式化 返回上周时间和当前时间

  9. 《快学Scala》——数组、映射和元组

    数组 定长数组:在Scala中可以用Array,初始化一个定长数组.例如: val nums = new Array[Int](10) //10个整数的数组,所有元素初始化为0 val a = new ...

  10. JS 基本数据类型和引用数据类型

    本文章已收录于:   .embody { padding: 10px 10px 10px; margin: 0 -20px; border-bottom: solid 1px #ededed } .e ...