table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】

简介: table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】

24907f88bf4fc45f31ced1a07a16d886.png

html表格的使用价值:

html表格的掌握对于很多页面的排版都非常重要,尤其做数据的排版用得非常多,因为比较简便,数据的加载速度也非常快。

html网页表格通常也用于各种表单数据提交类型的页面,可以实现更好的页面展示效果。

本文最终效果说明:

说明:其中数字1、3、4单元格实现合并两行。  数字11实现合并两列。

这个表格练习,充分考量了一个开发人员对表格类型标签的掌握程度,可在此基础上实现更为复杂的表格。

我们对于表格中行合并与列合并的操作都是用在td或者th这样的列单元格标签上的。

当前一格有行合并效果是,后一格默认单元格占据一行。

界面效果:

d3500b38a6d48d1c870120b6f609d3b1.png

源代码分享:

<html>
<head>
  <title>网页表格练习</title>
  <style>
       table{
            border:1px solid black;/*表格边线*/
            border-collapse:collapse;  /*折叠*/
       }
       table tr td{
            border:1px solid black;
            padding:0 10px;   /*单元格上下空开10px*/
            text-align:center; /*文字居中*/
        }
</style>
</head>
<body>
   <table>
       <tr>
           <td rowspan="2">1</td>
           <td>2</td>
           <td rowspan="2">3</td>
      </tr>
      <tr>
           <td>10</td>
      </tr>
      <tr>
           <td rowspan="2">4</td>
           <td>5</td>
           <td>6</td>
      </tr>
      <tr>
           <td>8</td>
           <td>9</td>
      </tr>
      <tr>
           <td>7</td>
           <td colspan="2">11</td>
      </tr>
  </table>
</body>
</html>
相关文章
|
1月前
|
前端开发 JavaScript C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
35 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
1月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
54 5
|
1月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
65 0
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
7天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
1月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
48 1
【HTML】构建网页的基石
|
14天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
17天前
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
|
17天前
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。

热门文章

最新文章