<!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. [NOI2011]兔兔与蛋蛋游戏 二分图博弈

    题面 题面 题解 通过观察,我们可以发现如下性质: 可以看做是2个人在不断移动空格,只是2个人能移动的边不同 一个位置不会被重复经过 : 根据题目要求,因为是按黑白轮流走,所以不可能重复经过一个点,不 ...

  2. 【BZOJ2339】卡农（递推，容斥）

    [BZOJ2339]卡农(递推,容斥) 题面 BZOJ 题解 先简化一下题意: 在\([1,2^n-1]\)中选择不重复的\(m\)个数,使得他们异或和为\(0\)的方案数. 我们设\(f[i]\)表 ...

  3. 服务器上的 Git - 生成 SSH 公钥

    http://git-scm.com/book/zh/ch4-3.html 生成 SSH 公钥 如前所述,许多 Git 服务器都使用 SSH 公钥进行认证. 为了向 Git 服务器提供 SSH 公钥, ...

  4. The 14th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - F 贪心+二分

    Heap Partition Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge A sequence S = { ...

  5. Codeforces 895.E Eyes Closed

    E. Eyes Closed time limit per test 2.5 seconds memory limit per test 256 megabytes input standard in ...

  6. js 生成二维码

    $(".good_info").on('click',function () { var id = $(this).data('id'); var string = 'http:/ ...

  7. '0','\0',NULL,EOF的区别

    要看是不是一个东西,打印一下即可 printf("%d %d %d %d\n",'0','\0',NULL,EOF); 输出: 48 0 0 -1 结论: '\0'与NULL 都是 ...

  8. Oracle用imp导入dmp文件记录一下

    ---------------------------------------------------------------------------------------------------- ...

  9. 对WebView进行的一些设置

    webView.getSettings().setJavaScriptEnabled(true); //使用setting WebSettings webSettings = webView.getS ...

  10. css纯数字或字母换行

    #div { word-wrap:break-word; word-break:break-all; }