<!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 （automaticallyAdjustsScrollViewInsets）

    导航控制器里边如果添加UIScrollView会导致放大操作异常怪异,此时设置 self.automaticallyAdjustsScrollViewInsets ＝ false

  2. vue props验证

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  3. libuv的多线程之间传递消息

    官网上给出的例子http://nikhilm.github.io/uvbook/threads.html#inter-thread-communication,中文理解在后边 Inter-thread ...

  4. Excel 报表导入导出

    使用 Excel 进行报表的导入导出,首先下载相关的 jar 和 excel util. Excel Util 下载地址 引入依赖: <!-- poi office --> <dep ...

  5. CSS全局声明*与body的区别

    通常在写CSS前,为了保证兼容性及展示效果的一致,先会清除浏览器默认样式.此时有两种用法比较常用:1.*{};  2.body{}; 之前我比较偏好于用*{},比较便于把控样式的设置.一直也没试过bo ...

  6. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

  7. Linux 目录详解 树状目录结构图

    1.树状目录结构图 2./目录 目录 描述 / 第一层次结构的根.整个文件系统层次结构的根目录. /bin/ 需要在单用户模式可用的必要命令(可执行文件):面向所有用户,例如:cat.ls.cp,和/ ...

  8. 从零搭建SSM框架（四）手动实现Tomcat部署

    发布War包 Windows环境部署 增加如下配置 <Context path="/" docBase="cnki" debug="0" ...

  9. asp.net core 实践

    github:https://github.com/zzhi/DotNetWeb 这是一个基于asp.net core web application的练习项目,目的是学习dotnet core新技能 ...

  10. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...