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. hibernate持久化框架

    Hibernate是一个优秀的持久化框架 瞬时状态:保存在内存的程序数据,程序退出后,数据就消失了,称为瞬时状态 持久状态:保存在磁盘上的程序数据,程序退出后依然存在,称为程序数据的持久状态 持久化: ...

  2. [Java自学第二天]

    Java封装性思想的初步理解 从项目需求的角度出发,建立各个模块化的类,各个模块暂时不需要具体的方法描述,只需要各个模块的理想到位. 以银行项目为例 初步设想需要三个模块:银行(Bank类).客户(C ...

  3. 如何快速理解JavaScript 中重要语句for循环

    一.基本结构:for(起始状态:判断条件:状态改变){ 执行语句: } 执行顺序:for(var i=1;i<3;i++){ alert(i); } 1.判断条件    2.执行语句    3. ...

  4. Angular杂谈系列2-Angular2升级Angular4指南

    什么什么?Angualr4都发布了,之前不都才Angualr2的么?又要推翻重来,啊? 那当然不是,Angualr4只是一个版本号而已,本质上还是Angular2:以后,谷歌把新版本的Angualr称 ...

  5. Session攻击（会话劫持+固定）与防御

    1.简介 Session对于Web应用无疑是最重要的,也是最复杂的.对于web应用程序来说,加强安全性的第一条原则就是 – 不要信任来自客户端的数据,一定要进行数据验证以及过滤,才能在程序中使用,进而 ...

  6. [Git]09 如何为命令起外号

    Git并不会推断你输入的几个字符将会是哪条命令,不过如果想偷懒,少敲几个命令的字符,可以用 git config 为命令设置别名.来看看下面的例子: $ git config --global ali ...

  7. H5万能选择器：iosselect

    iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...

  8. Java常用API解析——序列化API

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6797659.html 工作中发现,自己对Java的了解还很片面,没有深入的研究,有很多的J ...

  9. 与redmine对接

    redmine使用的版本为 2.3.01.打开rest web service2.jar依赖 <dependency> <groupId>com.taskadapter< ...

  10. Oracle的正则函数之regexp_like

    前言:最近接到一个让人肝疼的需求,用到了正则表达式去匹配字符串,顺便巩固一下oracle几个正则表达式的用法 例子: 找出为带小数点后两位的数字,不论正负.比如3.12,-4.56这样的.而3.145 ...