`

HTML&CSS基础学习笔记1.15-合并单元格

    博客分类:
  • HTML
阅读更多

合并单元格

之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识点如下:

1.标签<td>的[colspan]属性规定单元格可横跨的列数,即横向合并的单元格数;

2.标签<td>的[rowspan] 属性规定单元格可横跨的行数,即纵向合并的单元格数;

3.这2个标签也可以同时使用。

 

样式示例:

现在就来试试合并单元格吧:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>创建一个多行多列的表格</title>  
</head>  
<body>  
<h1>创建一个多行多列的表格</h1>  
  
<table border="1">  
    <tr><td colspan="2">第一个单元格</td><td>第二个单元格</td><td>第三个单元格</td></tr>  
    <tr><td rowspan ='2'>第四个单元格</td><td>第五个单元格</td><td>第六个单元格</td></tr>  
    <tr><td>第七个单元格</td><td>第八个单元格</td><td>第九个单元格</td></tr>  
</table>  
</body>  
</html>  

 

结果是这样的:



 

更多学习内容,请前往http://www.mayacoder.com/lesson/index

  • 大小: 30.9 KB
  • 大小: 11.8 KB
0
1
分享到:
评论
2 楼 octopole 2016-08-02  
up~~~~~
1 楼 octopole 2016-08-01  
32131231232

相关推荐

    html&css;韩顺平笔记---HTML部分.ppt

    本课件为韩顺平老师的HTML CSS JS 课程中的笔记整理,注意是截图版的 如需要下载文字版的请绕道 估计网上也找不到文字版的 本教程适合电脑复习用的

    学习笔记HTML-css-JS.zip

    学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...

    HTML CSS JS 学习、git-笔记.zip

    HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS ...

    HeadFirst HTML&amp;CSS学习笔记.zip

    CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记Head...

    php压缩合并html&js&css集合

    combo-master[php合并js&css].zip compress-js-css-v2.0.0.zip.7z HtmlCompressorBundle-master.zip html-minify-master[php压缩html].zip jsmin-php-master[php压缩js].zip minify-2.1.5[php合并js&css].zip ...

    jihong10102006#blog#07、CSS基础笔记02----对齐方式1

    title: 07、CSS基础笔记02----对齐方式tags: CSDN迁移上对齐中对齐下对齐。

    table-rowspan表格自动合并单元格插件

    3. **单元格合并**:在网页开发中,如果需要将多个相邻的单元格合并成一个大单元格,可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似,但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...

    HTML & CSS设计与构建网站 完整中文版带目录.pdf

    个人收集电子书,仅用学习使用,不可用于商业用途,如有版权问题,请联系删除! 前言 v 第1章 结构 1 第2章 文本 29 第3章 列表 51 第4章 链接 63 第5章 图像 83 第6章 表格 115 第7章 表单 133 第8章 其他...

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用,小编自己整理的李立超老师视频的笔记,手打不易,那就望您每年快乐吧。逃) 一、进制 1.十进制(日常使用): 特点:满10进1 计数:0 1 ...

    HTML+CSS学习笔记.zip

    HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...

    ext表格合并单元格的方法

    本文将详细介绍一种在Ext JS中实现数据单元格合并的方法,并通过示例代码来帮助开发者更好地理解和应用这一技术。 #### CSS样式调整 为了实现良好的视觉效果,在开始编写JavaScript代码之前,我们需要对CSS样式做...

    DataGridView合并单元格(纵向合并及横向合并)

    总之,掌握DataGridView的单元格合并技术对于提高用户界面的视觉效果和用户体验至关重要。无论是C# WinForms还是ASP.NET,都需要对控件的特性和API有深入理解,才能灵活地实现各种复杂的布局需求。在实际开发中,...

    Head First HTML&amp;CSS 学习笔记.zip

    《Head First HTML&cSS 学习笔记》是一套极具特色的学习资料,它基于同名畅销书籍《Head First HTML与CSS》,通过生动有趣的方式帮助初学者掌握HTML和CSS的基础知识。该资源不仅提供了详尽的笔记内容,还包含了丰富...

    HTML&amp;amp;CSS入门学习笔记

    HTML&CSS入门学习笔记

    Head first HTML&CSS;.pdf

    《Head First HTML&CSS》是一本由Eric Freeman和Elisabeth Robson编写的经典教材,旨在为读者提供一种直观、高效的学习方式,深入浅出地讲解HTML和CSS的基础与高级应用。这本书之所以受到广泛赞誉,不仅在于其内容的...

    列表多行多列合并单元格

    在Web开发中,尤其是构建数据报表时,列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用,尤其是在使用表格(table)元素展示数据时。下面将详细讲解如何实现这个功能。 ...

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...

Global site tag (gtag.js) - Google Analytics