<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <title>无标题文档</title>

</head>

<style type="text/css">

    /*公共样式*/

    li{

        width: 600px;

        margin: auto;

        margin-top: 20px;

    }

    p{

        width: 600px;

        margin: auto;

    }

    table{

        width: 600px;

        margin: auto;

        text-align: center;

    }

    /*基本表格样式*/

    .table-1{

        border: 1px solid #ccc;

        border-collapse: collapse;/*合并相邻表格的间距*/

    }

    .table-1 tr,.table-1 td{

        border: 1px solid #ccc;

    }

    /*无边框表格*/

    .table-2{

    }

    /*双线表格*/

    .table-3{

        border: 1px solid #ccc;

    }

    .table-3 tr,.table-3 td{

        border: 1px solid #ccc;

    }

    /*合并表格列*/

    .table-4{

        border: 1px solid #ccc;

        border-collapse: collapse;/*合并相邻表格的间距*/

    }

    .table-4 tr,.table-4 td{

        border: 1px solid #ccc;

    }

    /*合并表格行*/

    .table-5{

        border: :1px solid #ccc;

        border-collapse: collapse;

    }

    .table-5 tr,.table-5 td{

        border: 1px solid #ccc;

    }

    /*复杂表格一*/

    .table-6{

        border: :1px solid #ccc;

        border-collapse: collapse;

    }

    .table-6 tr,.table-6 td{

        border: 1px solid #ccc;

    }

    /*复杂表格二*/

    .table-7{

        border: :1px solid #ccc;

        border-collapse: collapse;

    }

    .table-7 tr,.table-7 td{

        border: 1px solid #ccc;

    }

</style>

<body>

    <div class="container">

        <ol>

            <li>基本表格样式：</li>

            <table class="table-1">

                <tr>

                    <td>1.1</td>

                    <td>1.2</td>

                    <td>1.3</td>

                </tr>

                <tr>

                    <td>2.1</td>

                    <td>2.2</td>

                    <td>2.3</td>

                </tr>

                <tr>

                    <td>3.1</td>

                    <td>3.2</td>

                    <td>3.3</td>

                </tr>

            </table>

            <li>无边框表格：</li>

            <table class="table-2">

                <tr>

                    <td>1.1</td>

                    <td>1.2</td>

                    <td>1.3</td>

                </tr>

                <tr>

                    <td>2.1</td>

                    <td>2.2</td>

                    <td>2.3</td>

                </tr>

                <tr>

                    <td>3.1</td>

                    <td>3.2</td>

                    <td>3.3</td>

                </tr>

            </table>

            <li>双线表格：</li>

            <table class="table-3">

                <tr>

                    <td>1.1</td>

                    <td>1.2</td>

                    <td>1.3</td>

                </tr>

                <tr>

                    <td>2.1</td>

                    <td>2.2</td>

                    <td>2.3</td>

                </tr>

                <tr>

                    <td>3.1</td>

                    <td>3.2</td>

                    <td>3.3</td>

                </tr>

            </table>

            <li>合并表格列：</li>

            <table class="table-4">

                <tr>

                    <!--未找到在css中的处理方式-->

                    <td colspan="3">1.1</td>

                </tr>

                <tr>

                    <td>2.1</td>

                    <td>2.2</td>

                    <td>2.3</td>

                </tr>

                <tr>

                    <td>3.1</td>

                    <td>3.2</td>

                    <td>3.3</td>

                </tr>

            </table>

            <p>注：colspan在css中失效</p>

            <li>合并表格行：</li>

            <table class="table-5">

                <tr>

                    <!--未找到在css中的处理方式-->

                    <td rowspan="3">1.1</td>

                    <td>1.2</td>

                    <td>1.3</td>

                </tr>

                <tr>

                    <td>2.2</td>

                    <td>2.3</td>

                </tr>

                <tr>

                    <td>3.2</td>

                    <td>3.3</td>

                </tr>

            </table>

            <p>注：rowspan在css中失效</p>

            <li>复杂表格（一）</li>

            <table class="table-6">

                <tr>

                    <!--未找到在css中的处理方式-->

                    <td>1.1</td>

                    <td colspan="2">1.2</td>

                </tr>

                <tr>

                    <td>2.1</td>

                    <td rowspan="2">2.2</td>

                    <td>2.3</td>

                </tr>

                <tr>

                    <td>3.1</td>

                    <td>3.3</td>

                </tr>

            </table>

            <li>复杂表格（二）</li>

            <table class="table-7">

                <tr>

                    <!--未找到在css中的处理方式-->

                    <td>1.1</td>

                    <td>1.2</td>

                    <td>1.3</td>

                </tr>

                <tr>

                    <td colspan="2">2.1</td>

                    <td rowspan="2">2.3</td>

                </tr>

                <tr>

                    <td>3.1</td>

                    <td>3.2</td>

                </tr>

            </table>

        </ol>

    </div>

</body>

<html>

HTML表格的基本操作的更多相关文章

  1. Jquery Table 的基本操作

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

  2. mysql 表结构及基本操作

    说明在mysql语句中,sql语句总共分四种 a.DDL数据定义语句=>常用的ddl语句有(CREATE[创建],DROP[删除],ALTER[修改表结构]) b.DML数据操作语句=>常 ...

  3. Emacs Org-mode 3 表格

    Org 使用内置的表格编辑器.可以进行简单的表格编写和计算. Org中的表格 第一个非空字符“|” 视为表格的起始位置,后面的“|” 视为字段分隔符. 3.1 生成表格 编写表格时,可以将字段先写好, ...

  4. Excel 2013 表格自用技巧

    参考 Excel表格的基本操作(精选36个技巧) Excel2013基本用法 关于VLOOKUP函数 目录 快速复制单元格 单元格内强制换行 锁定标题行 查找重复值 万元显示 单元格中显示001 按月 ...

  5. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  6. Jquery操作Table

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

  7. 《Visual C++开发实战1200例 第1卷》扫描版[PDF]

    [内容简介:] <Visual C++开发实战1200例(第1卷)>是“软件开发实战1200例”丛书之一.<Visual C++开发实战1200例(第1卷)>,编程实例的四库全 ...

  8. mysql图形化管理工具workbench下载安装以及基本使用

    1.下载安装 去mysql官网下载地址进行下载安装 2. 创建schema和表格等基本操作 (1)连接数据库 打开workbench,操作如下: ps:正常需要输入mysql的密码的,但是我之前保存了 ...

  9. 《HelloGitHub》第 57 期

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...

随机推荐

  1. unity3d模型不接受光照

    9楼 发表于 2015-4-21 16:34 | 只看该作者 sailo 发表于 2015-4-14 11:15 你好.遇到同样问题,请问要什么解决 1.你可以选择你不受光线照射的模型,模型属性lay ...

  2. Java Web 生成临时文件并下载

    转自: Java Web 生成临时文件并下载 概述:本文是  java 服务器端生成文件并下载的示例,并不完善,下载之后一般来说还需要删除临时文件. 注意:临时文件存放在 /WEB-INF/tmp 目 ...

  3. bzoj 1588 平衡树 splay

    1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 15446  Solved: 6076[Submit][Sta ...

  4. java 注解详解

    先引用一下百度百科的名词解析: 定义:注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它可以声明在包.类.字段. ...

  5. C++类成员空间分配和虚函数表

    最近在自学python,看到继承和类,就顺便复习了C++的类和继承等方面的知识. 先看Base基类 class Base { private: virtual void display() { cou ...

  6. python中如何优雅使用import

    http://note.youdao.com/noteshare?id=c55be6a8565f5eb586aa52244b3af010

  7. Linux常用网络工具：路由扫描之mtr

    除了上一篇<Linux常用网络工具:路由扫描之traceroute>介绍的traceroute之外,一般Linux还内置了另一个常用的路由扫描工具mtr. mtr在某些方面比tracero ...

  8. 前端PHP入门-033-连接数据库-天龙八步

    php检查MySQL的支持是否开启? 若没有看到mysqli扩展在windows服务器下,打开php.ini文件,将php_mysqli.dll打开即可! 注意: 从PHP7开始默认不再支持mysql ...

  9. git安装和简单配置

    http://pan.baidu.com/share/link?shareid=4291215660&uk=219947478 直接贴网盘的地址了

  10. codevs 1029 遍历问题

    1029 遍历问题 http://codevs.cn/problem/1029/  时间限制: 1 s  空间限制: 128000 KB     题目描述 Description 我们都很熟悉二叉树的 ...