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. Historical节点

    Historical节点 Historical 节点的作用是,load 历史数据提供查询. 运行类 io.druid.cli.Main server historical 装载和保存Segments ...

  2. 初学VUE2.0

    初学VUE2.0 (个人笔记,写完后发现好乱....下期使用markdown书写.) 概述 webstorm添加对VUE的支持 http://www.jianshu.com/p/142dae4f8b5 ...

  3. 使用live555 在linux下搭建 rtsp server

    系统环境 Debian 7 x64  / centos 7 x64  都可以 首先去下载源码 http://www.live555.com/liveMedia/public/live555-lates ...

  4. extj6.0写增删查改（1）-------查询

    本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onS ...

  5. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

  6. JavaEE开发之SpringMVC中的自定义消息转换器与文件上传

    上篇博客我们详细的聊了<JavaEE开发之SpringMVC中的静态资源映射及服务器推送技术>,本篇博客依然是JavaEE开发中的内容,我们就来聊一下SpringMVC中的自定义消息转发器 ...

  7. （函数封装）domReady

    一般的我们用window.onload()来判断文档是否加载完成,我们一般采用下面的做法: 当文档加载全部完后,我们在执行代码块(很显然,当需要加载的文档及节点庞大时,用户体验可能会变很差) wind ...

  8. Java中遍历Map的常用方法

    以下方法适用于任何map实现(HashMap, TreeMap, LinkedHashMap, Hashtable, 等等): 方式一(推荐): // 推荐 // 在for-each循环中使用entr ...

  9. grunt轻松入门

    项目目录,js源文件 gruntest Gruntfile.js package.json -- js ext community_plugin.js glogin_frm_cover.js iLog ...

  10. ES6之"let"能替代"var"吗?

    译者按: 使用let的确会比var安全很多. 原文: Why You Shouldn't Use 'var' Anymore 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 我已经使 ...