HTML+CSS表格制作（合并单元格）简单方法

在表格当中，我们通常需要用到合并单元格。作为小白，我们通常会困惑于如何设置表格。这里教大家一个简单易行的设置方法。

操作方法

  • 01

    我们通常用代码合并单元格的话，是这样的，跨列使用colspan，跨行使用rowspan。这里我先将代码贴出来，方便小伙伴们自己动手试试，稍后我将向大家展示如何使用DW CC方便快捷地合并单元格 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> table{border: 1px solid #000;width: 500px;height: 200px;margin: 0 auto;} table td{border: 1px solid #878787;} </style> </head> <body> <table> <tr> <td colspan="7" style="text-align: center">表格内容</td> </tr> <tr> <td rowspan="4">表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr> <tr> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr> <tr> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr> <tr> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr> </table> </body> </html>

  • 02

    接下来开始讲解如何使用DW CC简易合并单元格； 首先肯定是得建立一个表格，这里建立一个5*7的表格作为示例。 输入代码之后， 在键盘上敲击End键，再敲击Tab键，快速创建。代码中，大括号中的内容表示的是表格总将要放置的内容，每个表格中如果需要放置不同的内容的话，可以在创建好表格后自行修改。

  • 03

    为了表格能够更加清楚地显示效果，我们需要给表格添加一些CSS效果。 <style> table{border: 1px solid #000;width: 500px;height: 200px;margin: 0 auto;} table td{border: 1px solid #878787;} </style>

  • 04

    我们将视图换成设计视图

  • 05

    快捷键Ctrl + F3调出属性视图

  • 06

    选中需要合并的单元格

  • 07

    在属性面板中点击合并

  • 08

    适当修改之后如下所示。合并单元格到此结束

赞 (0)

相关推荐

  • 如何在手机WPS新建表格以及合并单元格

    如何在手机WPS新建表格以及合并单元格

    WPS是一款功能强大的办公软件,有些用户习惯使用电脑版WPS,而不知道如何在手机WPS新建表格以及合并单元格,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开手机中的[WPS] ...

  • WPS怎么在Word文档中插入表格并合并单元格

    WPS怎么在Word文档中插入表格并合并单元格

    WPS是现在十分常用的办公软件之一,有些新用户不知道WPS怎么在Word文档中插入表格并合并单元格,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并双击[W ...

  • excel表格如何合并单元格

    excel表格如何合并单元格呢?很多人都不会,下面小编来教大家. 操作方法 01 首先,我们打开我们电脑上面的excel: 02 然后我们选中需要合并的单元格,如图所示: 03 之后我们点击工具栏中的 ...

  • 怎样在Word2007文档表格中合并单元格

    在Word2007文档表格中,通过使用"合并单元格"功能可以将两个或两个以上的单元格合并成一个单元格,从而制作出多种形式.多种功能的Word表格.用户可以在Word2007文档表格 ...

  • excel表格如何合并单元格有没有快捷键呢

    excel表格如何合并单元格有没有快捷键呢

    我们在使用excel的时候经常会遇到需要合并单元格的情况,那么excel表格如何合并单元格?有没有快捷键可以更方便呢?在这里,小编告诉大家,没有合并单元格的快捷键.但是有两种鼠标合并单元格的方法.第一 ...

  • 在WPS演示中插入的表格怎么合并单元格

    在WPS演示中插入的表格怎么合并单元格

    今天给大家介绍一下在WPS演示中插入的表格怎么合并单元格的具体操作步骤.方法一:1.打开电脑上WPS演示,进入编辑页面后,选择插入---表格2. 然后将想要合并的单元格全部选中3. 右键,在打开的菜单 ...

  • 如何在手机版的WPS表格中合并单元格

    如何在手机版的WPS表格中合并单元格

    今天给大家介绍一下如何在手机版的WPS表格中合并单元格的具体操作步骤.1. 首先打开手机上的wps软件,进入主页面后,选择想要编辑的文档,打开,如图,在打开的页面,点击左下角的"工具&quo ...

  • 如何给WPS表格设置合并单元格时的默认格式

    如何给WPS表格设置合并单元格时的默认格式

    今天给大家介绍一下如何给WPS表格设置合并单元格时的默认格式的具体操作步骤.1. 首先打开电脑,找到想要编辑的WPS表格,进入主页面后,点击上方的开始菜单.2. 在打开的开始选项下,点击合并居中旁边的 ...

  • 如何在excel表格的合并单元格中换行

    如何在excel表格的合并单元格中换行

    我们在编辑Excel表格的时候,想要在合并单元格中换行,该怎么操作呢?今天就跟大家介绍一下如何在excel表格的合并单元格中换行的具体操作步骤.1. 首先打开电脑上的Excel表格,进入编辑页面后,将 ...

  • wps表格怎么合并单元格，wps表格怎么拆分单元格

    wps表格怎么合并单元格,wps表格怎么拆分单元格.在微软自带的OFfice办公软件上可能大家都会这个,那么下面我就来说一下wps表格怎么合并单元格,wps表格怎么拆分单元格. 操作方法 01 创建并 ...