<!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. UIScrollView 在手指点击的坐标处放大

    写了一个extension,如下: extension UIScrollView{ ///在ScrollView上的某个点放大 func zoomWithPoint(var zoomPoint:CGP ...

  2. Linux实用命令行

    对于Linux命令,我在学习和使用过程中是有一个循序渐进的过程的.适合小白学习快速使用.大笑 跳转目录:cd +路径 例如:cd /home/workspace 查看某个文件,常用的是查看日志:tai ...

  3. 【BZOJ2115】Xor（线性基）

    [BZOJ2115]Xor(线性基) 题面 BZOJ Description Input 第一行包含两个整数N和 M, 表示该无向图中点的数目与边的数目. 接下来M 行描述 M 条边,每行三个整数Si ...

  4. 【BZOJ4516】生成魔咒（后缀自动机）

    [BZOJ4516]生成魔咒(后缀自动机) 题面 BZOJ Description 魔咒串由许多魔咒字符组成,魔咒字符可以用数字表示.例如可以将魔咒字符 1.2 拼凑起来形成一个魔咒串 [1,2]. ...

  5. 解题：CTSC 2017 吉夫特

    题面 首先有个结论:$C_n^m$为奇数当且仅当$m$是$n$的一个子集 于是从后往前推,记录每个数出现的位置,然后对每个位置枚举子集统计在它后面的贡献即可 #include<cstdio> ...

  6. Codeforces 543.B Destroying Roads

    B. Destroying Roads time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  7. [Java多线程]-并发,并行,synchonrized同步的用法

    一.多线程的并发与并行: 并发:多个线程同时都处在运行中的状态.线程之间相互干扰,存在竞争,(CPU,缓冲区),每个线程轮流使用CPU,当一个线程占有CPU时,其他线程处于挂起状态,各线程断续推进. ...

  8. tf.transpose函数解析

    tf.transpose函数解析 觉得有用的话,欢迎一起讨论相互学习~Follow Me tf.transpose(a, perm = None, name = 'transpose') 解释 将a进 ...

  9. Asp.Net Core 依赖注入默认DI，Autofac注入

    使用默认DI 修改Startup类方法ConfigureServices如下: public void ConfigureServices(IServiceCollection services) { ...

  10. poi对excel的操作（二）

    二.进阶的对象 1.CellType 枚举类 单元格类型 CellType.STRING---文本型 等 如何是指单元格类型:cell.setCellType(CellType.STRING) 2.C ...