html table如何上下行合并?

html table如何上下行合并?,第1张

方法:

<table border=1>

<tr>

<td rowspan=2>11</td><td>12</td>

</tr>

<tr>

<td>22</td>

</tr>

</table>

rowspan合并行,colspan 合并列

定义和用法:

<table> 标签定义 HTML 表格

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异:

在 HTML 401 中,table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。

在 XHTML 10 Strict DTD,table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

TIY 实例:

表格

这个例子演示如何在 HTML 文档中创建表格。

表格边框

本例演示各种类型的表格边框。

没有边框的表格

本例演示一个没有边框的表格。

表格中的标题(Headings)

本例演示如何显示表格标题。

单元格

本例展示如何使用 "&nbsp;" 处理没有内容的单元格。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何在不同的元素内显示元素。

单元格填充(Cell padding)

本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用单元格间距增加单元格之间的距离。

向表格添加背景颜色或背景图像

本例演示如何向表格添加背景

向表格单元添加背景颜色或者背景图像

本例演示如何向一个或者更多表格单元添加背景

在表格单元中排列内容

本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

框架(frame)属性

本例演示如何使用 "frame" 属性来控制围绕表格的边框。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

table td{

width: 100px;

padding: 5px;

}

</style>

</head>

<body>

<table border="1" cellspacing="0" cellpadding="0">

<tr>

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td rowspan="3">Data</td>

</tr>

<tr>

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr>

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr>

<td colspan="4">Data</td>

<td colspan="5">Data</td>

</tr>

</table>

</body>

</html>

方法:

<table border=1>

<tr>

<td rowspan=2>11</td><td>12</td>

</tr>

<tr>

<td>22</td>

</tr>

</table>

rowspan合并行,colspan 合并列

定义和用法:

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异:

在 HTML 401 中,table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。

在 XHTML 10 Strict DTD,table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

TIY 实例:

表格

这个例子演示如何在 HTML 文档中创建表格。

表格边框

本例演示各种类型的表格边框。

没有边框的表格

本例演示一个没有边框的表格。

表格中的标题(Headings)

本例演示如何显示表格标题。

空单元格

本例展示如何使用 "&nbsp;" 处理没有内容的单元格。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何在不同的元素内显示元素。

单元格填充(Cell padding)

本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用单元格间距增加单元格之间的距离。

向表格添加背景颜色或背景图像

本例演示如何向表格添加背景

向表格单元添加背景颜色或者背景图像

本例演示如何向一个或者更多表格单元添加背景

在表格单元中排列内容

本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

框架(frame)属性

本例演示如何使用 "frame" 属性来控制围绕表格的边框。

<style>

table{border-collapse:collapse;}

table th,table td{width:60px;border:solid 1px #000;}

</style>

<table>

    <thead>

        <tr>

            <th rowspan="3">分公司</th><th rowspan="2" colspan="4">累计预约总数</th><th colspan="14">iphone7</th>

        </tr>

        <tr>

            <th colspan="4">32G</th><th colspan="5">128G</th><th colspan="5">256G</th>

        </tr>

        <tr>

            <th>累计预约总数</th><th>其中:全款</th><th>其中:定金预约</th><th>其中:免费预约</th><th>银</th><th>黑</th><th>金</th><th>玫瑰金</th><th>银</th><th>黑</th><th>亮黑</th><th>金</th><th>玫瑰金</th><th>银</th><th>黑</th><th>亮黑</th><th>金</th><th>玫瑰金</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>全省</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>

        </tr>

    </tbody>

</table>

<table cellspacing="0" cellpadding="0" border="1">

<tr>

<td rowspan="2">1行1单元格</td><td>1行2单元格</td>

</tr>

<tr>

<td>2行1单元格</td>

</tr>

<tr>

<td>3行1单元格</td><td>3行2单元格</td>

</tr>

</table>

楼主是否是要这样?

合并单元格 行合并就设置td的colspan属性为要合并的单元格个数 列合并就设置td的rowspan

这是最简单的写法:(你应该可以看懂)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

    </head>

    <body>

        <table border="1" cellspacing="0" width="300" height="300">

            <tr>

                <td></td>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td colspan="4"></td>

            </tr>

        </table>

    </body>

</html>

效果如下:

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/12177539.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存