<!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. 【BZOJ5306】[HAOI2018]染色（NTT）

    [BZOJ5306]染色(NTT) 题面 BZOJ 洛谷 题解 我们只需要考虑每一个\(W[i]\)的贡献就好了 令\(lim=min(M,\frac{N}{S})\) 那么,开始考虑每一个\(W[i ...

  2. 服务器版“永恒之蓝”高危预警 （Samba远程命令执行漏洞CVE-2017-7494） 攻击演示

    漏洞信息: 2017年5月24日Samba发布了4.6.4版本,中间修复了一个严重的远程代码执行漏洞,漏洞编号CVE-2017-7494,漏洞影响了Samba 3.5.0 之后到4.6.4/4.5.1 ...

  3. [学习笔记]搜索——模拟与dp的结合

    搜索: 一种基础的算法. 考察常见于NOIP 但是高级的搜索算法可能还会在省选出现. 50%以上的暴力都可以用搜索直接枚举来写. 但是,当数据规模不是很大的时候,搜索也可能成为正解. (比如剪枝PK状 ...

  4. (转)IO复用,AIO,BIO,NIO,同步，异步，阻塞和非阻塞 区别

    本文来自:https://www.cnblogs.com/aspirant/p/6877350.html?utm_source=itdadao&utm_medium=referral,非常感谢 ...

  5. Windows 安装 RabbitMQ

    RabbitMQ概述 RabbitMQ是流行的开源消息队列系统,是AMQP(Advanced Message Queuing Protocol高级消息队列协议)的标准实现,用erlang语言开发.Ra ...

  6. 用shell获取目录/文件夹/文件的时间戳

    命令: date +%s -r 目录名/文件名 输出内容形如: 1276225332

  7. 关于Linux运维的一些题目总结

    一.有文件file1 1.查询file1里面空行的所在行号 awk ‘{if($0~/^$/)print NR}’ fileorgrep -n ^$ file |awk ‘BEGIN{FS=”:”}{ ...

  8. HTML5笔记-加强版

    新增的语法结构表单验证   1.新的页面结构以及宽松的语法规范:<!doctype html> <meta charset=“utf-8”/> 2.新的结构化元素:语义化标签: ...

  9. Anniversary party（树形dp入门）

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  10. CSS进阶知识

    html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } 该属性的作用是 ...