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>
相关文章
|
19天前
|
移动开发 前端开发 数据可视化
前端HTML:构建网页的基石
前端HTML:构建网页的基石
17 0
|
23天前
HTML_表单标签
HTML_表单标签
16 0
|
9天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
11天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
11天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
11天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
11天前
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
|
11天前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
|
11天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。
|
11天前
|
运维 前端开发 JavaScript
【专栏:HTML进阶篇】HTML与Web标准:构建可访问与可维护的网页
【4月更文挑战第30天】本文探讨了HTML与Web标准的关系,强调遵循标准对创建高质量、可访问、可维护网页的重要性。通过使用语义化标签、提供文本替代、合理使用表格和列表,可提升网页可访问性;通过结构化文档、添加注释、分离结构与表现,能增强网页可维护性。遵循Web标准,可确保网页在不同设备上的兼容性,并满足各类用户需求。