首页 » 网站推广 » phptd属性技巧_html开拓笔记20合并单元格列和行

phptd属性技巧_html开拓笔记20合并单元格列和行

访客 2024-11-29 0

扫一扫用手机浏览

文章目录 [+]

二、怎么合并?

向单元格添加属性即可实现,合并 列 和 行的属性不一样

1、合并列的属性:clospan="2" //要合并几列数字便是几

phptd属性技巧_html开拓笔记20合并单元格列和行

2、合并行的属性:rowspan="2" //同理,要合并几行数字便是几

phptd属性技巧_html开拓笔记20合并单元格列和行
(图片来自网络侵删)

3、合并后的单元格(行或列)一定会自动多出来一个,须要手动删掉。

4、重点:合并单元格只和 td 标签有关系:

(1)合并列:是旁边合并,在左侧的 td 标签中添加 colspan="2" 要合并的 td 的数量。

(2)合并行:是高下合并,在上面的 td 标签中添加 rowspan="2" 要合并的td的数量。

(3)合并完后删除多余的 td 标签。

三、两个属性的用法

1、合并 列 的用法:

(1)首先确定你要合并的单元格在第几行第几列,然后找到它,从他的td标签中添加属性。

例如要合并第4行的,第4和第5列:

<tr> <td>第三节</td> <td>html</td> <td>css</td> <td colspan="2">php</td> <!-- 合并 列 的用法--> <td>php</td> </tr>

2、合并 行 的用法:

例如下面:合并第3行和第4行的第1列。

完全代码:↓

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--网页举头--> <title>Title</title></head><body><table border="2"> <!-- 给表格添加标题 --> <caption><h2>课程表</h2></caption> <tr> <td></td> <th>周一课程</th> <th>周二课程</th> <th>周三课程</th> <th>周四课程</th> </tr> <tr> <td>第一节</td> <td>html</td> <td>css</td> <td>php</td> <td>python</td> </tr> <tr> <td>第二节</td> <td rowspan="2">html</td> <!-- 合并 行 的用法--> <td>css</td> <td>php</td> <td>python</td> </tr> <tr> <td>第三节</td> <td>css</td> <td colspan="2">php</td> <!-- 合并 列 的用法--> </tr></table></body></html>

标签:

相关文章

Python编程从入门到精通,探索编程之美

编程已经成为现代社会的一项基本技能。Python作为一种简单易学、功能强大的编程语言,在我国教育领域备受关注。本文将从Python...

网站推广 2025-03-02 阅读1 评论0

Scum07代码编程之美与适用方法

编程已成为当今社会不可或缺的技能之一。Scum07代码作为一款经典的编程语言,在我国众多程序员中备受推崇。本文将深入解析Scum0...

网站推广 2025-03-02 阅读1 评论0

Linux环境下的前端代码运行优化与步骤

前端技术逐渐成为软件开发的核心。Linux操作系统因其稳定性、安全性、开放性等特点,成为众多开发者和企业青睐的运行环境。本文将从L...

网站推广 2025-03-02 阅读1 评论0