Html Table 合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ol>
    <li>基本表格</li>
    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
        <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>
    <br/>
    <li>表格合并列</li>
    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
        <tr>
            <td colspan="3" >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>
    <br/>
    <li>表格合并行</li>
    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
        <tr>
            <td  rowspan="3">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>
    <br/>
    <li>复杂表格</li>
    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
        <tr>
            <td >1.1</td>
            <td colspan="2">1.2</td>
            <!--<td>1.3</td>-->
        </tr>
        <tr>
            <td >2.1</td>
            <td rowspan="2">
                2.2
                <br/>
                3.2
            </td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <!--<td>3.2</td>-->
            <td>3.3</td>
        </tr>
    </table>
    <br/>
</ol>
</body>
</html>

效果如下:

小注:

表格部分基础知识:点击打开链接

时间: 2024-11-05 14:42:44

Html Table 合并单元格的相关文章

table合并单元格colspan和rowspan

起因 解决方案 colspan rowspan colspan rowspan 综合实例 起因     最近要实现一个成绩分析的功能,最终是要呈现到Word中的,一开始想到的使用报表显示,但是得有单独的数据库表来存储这些数据,如果说项目是刚开始做的话,倒也好说,不过现在项目已经进入了后期,在新建数据库表就有点不现实了,因此就jsp界面手画table了.但是在画table的过程中遇到一个问题,有些单元格是合并的,那么怎么来合并单元格呢? 解决方案 colspan & rowspan     col

JSP中动态合并单元格的实例代码_JSP编程

废话不多说了,具体代码如下所示: <span style="font-size:14px;"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table width="100%" border="0" cellspacing="0" cellpadding="0&q

table标签的结构与合并单元格的实现方法

以下是对table标签的结构与合并单元格的实现方法进行了详细的分析介绍,需要的朋友可以过来参考下   1.<table>标签的结构示例代码: 复制代码 代码如下:  <table border="1">       <caption>信息统计表</caption>        <thead>        <tr >        <th>#</th>        </tr>

jquery操作表格 合并单元格

jquery操作table,合并单元格,合并相同的行   合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.fn.mergeCell = func

Repeater后台合并单元格问题

问题描述 前台绑定代码<tablewidth="100%"border="0"align="center"cellpadding="3"cellspacing="1"bgcolor="#bed6e0"id="repeaterTable"><cc1:HHRepeaterID="repXmxx"runat="server&q

jquery 动态合并单元格的实现方法_jquery

如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab

asp.net C#取Excel 合并单元格内容

asp教程.net c#取excel 合并单元格内容 读取excel数据,填充dataset // 连接字符串 string xlspath = server.mappath("~/www.111cn.net/somefile.xls"); string connstr = "provider=microsoft.jet.oledb.4.0;" + "extended properties="excel 8.0;hdr=no;imex=1&quo

EasyUI DataGrid根据字段动态合并单元格

1.合并方法 /*** EasyUI DataGrid根据字段动态合并单元格* 参数 tableID 要合并table的id* 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");*/function mergeCellsByField(tableID, colList) {    var ColArray = colList.split(",");    var tTable = $("#"

word拆分合并单元格方法

合并单元格方法 ①选择好多个需要合并的单元格,然后右键,在弹出的菜单中选择"合并单元格"即可. ②同样选择好需要合并的单元格,点击"表格与边框"工具栏上的"合并单元格"图标即可合并. 拆分单元格方法 ①将光标定位到需要拆分的单元格中,然后右键选择"拆分单元格"在弹出的"拆分单元格"中输入要拆分的"行数"或"列数"确定即可. 一下是Word文档中合并与拆分单元格的步骤和