table表格讲解

最新推荐文章于 2024-04-22 01:15:27 发布
最新推荐文章于 2024-04-22 01:15:27 发布
阅读量849 收藏 4
点赞数 3
文章标签： servlet html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lou15516575959/article/details/126744464
版权

表格分为2部分：一是行用<tr></tr>表示，二是列用<td></td>表示。

  基本格式

<html>
    <head></head>
    <body>
       <table>
           <tr>
               <td>安其拉</td>
               <td>李白</td>
               <td>貂蝉</td>
           </tr>
           <tr>
               <td>鲁班</td>
               <td>张良</td>
               <td>孙尚香</td>
           </tr>
           <tr>
               <td>李元芳</td>
               <td>后裔</td>
               <td>东皇太一</td>
           </tr>
       </table>
    </body>
</html>

表格标签的属性

表格标签的边框属性和表格大小属性:

<table width="宽" height="高" border="边框"></table>

   表格标签的间距属性和边距属性:

<table cellspacing="单元格之间的距离" cellpadding="内容到边框的距离"></table>

    表格标签背景图片属性：

<table background="背景图片的地址（图片路径）"></table>

设置表格水平对齐方式属性：

<table align="left(左) center(中) right(右)"></table>

合并以上属性的格式：

<html>
    <head></head>
    <body>
       <table border="1px" width="400px" height="400px" cellspacing="0" align="center" background="img\22.jpg">
           <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>
       </table>
    </body>
</html>

行标签属性

行标签的背景颜色属性:

<tr bgcolor="颜色"></tr>

行标签的水平对齐方式属性:

<tr align="left(左) center(中) right(右)"></tr>

行标签的垂直对齐方式属性:

<tr valign="top(上) middle(中) bottom(下)"></tr>

单元格标签的属性

单元格大小属性

<tr widht='宽' height="高"></tr>

背景颜色和背景图片属性：

<tr bgcolor="颜色" background="图片路径"></tr>

合并单元格属性

<td colspan="横向合并" rowspan="纵向合并"></td>

colspan=""和rowspan="",值是数字，合并几个单元格就写几个。注意：如果是横向合并，要把属性添加到最左边的<td>。如果是纵向合并，要把属性添加到最上边的<td>。

前端韦小宝
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 3691
HTML over
前端vue自定义table 表格 表格组件 Excel组件
chenchuang0128的博客
05-29 8153
随着技术的发展，前端开发的复杂度越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，我们可以将复杂的系统分解为一系列简单的组件，这不仅提高了开发效率，降低了维护成本，而且使得我们的应用更加灵活，能够更好地适应不断变化的需求。在实现原理中，我们的自定义表格组件Excel采用了自适应布局设计，可以根据不同的屏幕尺寸自动调整表格的列宽，以达到最佳的显示效果。此外，我们的Excel组件还具有很好的扩充性。
【前端修炼场】— table 表格的构建
热爱生活，积极向上的阿酱！
01-10 2811
本篇文章我将带领诸位学习如何在页面中添加 table 表格。我们往往通过表格的形式去更好的展示我们所需要展示的内容。话不多说，诸君准备好了么？打开 VSCode 和我一起操作吧！很开心与你们相遇，相遇即是缘，祝愿我们都越来越好！
前端学习笔记一一HTML表格标签（table）
最新发布
2401_84092068的博客
04-22 393
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。所以看完之后，还是多多行动起来吧！
前端学习笔记——table表格的创建Html基础
asdfghjilp的博客
04-17 1145
文章目录一、table数据表格的基础创建二、table表格的相关属性三 、table tr td属性设置 一、table数据表格的基础创建 <table> <!-- 创建表格 --> <tr> <!-- tr 表示行 --> <td>1</td> <!-- td表示列 --> <td>2</td> </tr> <tr>
前端——10.表格标签
m0_52096593的博客
03-14 623
表格标签是实际开发中非常常用的标签。我们要熟练的使用它。表格的主要作用表格的基本语法。
删除table表格行的实例讲解
08-29
本文将详细讲解如何通过JavaScript实现删除HTML表格行的功能。 首先，了解HTML表格的基本结构。一个HTML表格由`<table>`元素定义，其中包含多个`<tr>`（表格行）元素，每个行内又可以包含多个`<td>`（表格数据）或`...
Angular实现的table表格排序功能完整示例
10-18
在AngularJS中，实现table表格排序功能是一项常见的需求，它涉及到事件监听、数据处理和DOM操作。本示例将详细讲解如何在AngularJS环境中构建一个具备排序功能的表格。 首先，我们创建一个AngularJS应用模块，并...
自适应Table表格样式代码
06-24
自适应Table表格样式代码是为了确保无论用户使用何种设备浏览网页，表格都能保持清晰、易读且布局合理的状态。本文将详细讲解如何实现这样的效果，并介绍相关的关键技术和实践方法。 首先，我们需要理解表格的基本...
JQuery 动态生成Table表格实例代码
11-29
本实例将详细讲解如何使用jQuery的`append`和`appendto`方法来动态生成Table表格。 首先，让我们了解`append`和`appendto`这两个jQuery方法。`append`方法用于在匹配元素的末尾添加新的内容，而`appendto`则是相反...
CSS合并单元格四种方式：table/display/flex/grid
热门推荐
weixin_43932309的博客
07-12 1万+
CSS合并单元格四种方式：table/display/flex/grid。
HTML表格标签及其属性
weixin_49542222的博客
08-04 890
表格标签主要由下面三个标签组成 <table> <tr> <td> </td> </tr> </table> <table></table>代表着整个表格，而<tr></tr>表示一行，有多少个tr标签就代表有多少行。ty标签里的<td></td>表示行内的一个格子，一个ty标签里有多少个td标签就说明一行里有多少个格子
前端学习笔记一一HTML表格标签（table），字节跳动前端岗位面试分享
radcb55226的博客
04-05 373
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取[外链图片转存中…(img-TAqPUIf0-1712309755872)][外链图片转存中…(img-OuPcobNW-1712309755872)][外链图片转存中…(img-16auqz41-1712309755872)]
table表格基础知识及简单运用
yuzhochaojiwudib的博客
04-06 441
在HTML中我们用< table >标签来定义表格，它和Excel表格类似，都包括行、列、单元格、表头等，但是在功能方面HTML的表格远不如Excel强大。
表格基础知识
weixin_72553821的博客
07-13 462
包含了表格的基础知识
【岁月留声（Javascript）】动态合并table单元格
Kida 的技术小屋（CSDN 版）
05-11 1万+
废话不说直接上代码
table合并单元格
Jovan的博客
08-11 3825
遇到这种设计，记录一下 <el-table :data="tableDataNew" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-column prop="id" label="ID" width="180"> &lt...
web前端——table标签
xishaoguo的博客
02-26 1万+
table：表格的意思，在早期的时候，table是非常常用的，现在还有好多后台人员在用这个标签。但是现在不推荐使用table这个标签。table标签的用法:&lt;table&gt;        &lt;tr&gt;&lt;th&gt;我是标题&lt;/th&gt;&lt;/tr&gt;        &lt;tr&gt;&lt;td&gt;tr是行&lt;/td&gt;&amp
<table>中的<td>表示table data（表格数据），<tr>表示table row（表格行），<th>表示table head（表格头）
柳婼 の blog
07-02 1451
中的 表示table data（表格数据） 表示table row（表格行） 表示table head（表格头）
element plus table合并单元格讲解
10-19
Element Plus是一套基于Vue.js 2.0的桌面端组件库，其中的table表格组件支持合并单元格。在Element Plus中，我们可以通过设置span-method属性来自定义合并单元格的方法。具体来说，我们需要在data中定义一个方法，该方法接收两个参数：row和column，分别表示当前单元格所在的行和列。在该方法中，我们可以根据需要返回一个对象，该对象包含两个属性：rowspan和colspan，分别表示需要合并的行数和列数。例如，如果我们需要将第一列中相同的单元格合并，可以编写如下的span-method方法： ``` spanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { let rowspan = 1; for (let i = rowIndex + 1; i < this.tableData.length; i++) { if (this.tableData[i][columnIndex] === this.tableData[rowIndex][columnIndex]) { rowspan++; } else { break; } } return { rowspan, colspan: 1 }; } } ``` 在上述代码中，我们首先判断当前单元格是否为第一列，如果是，则遍历该列下面的所有单元格，找到相同的单元格并计算需要合并的行数，最后返回一个包含rowspan和colspan属性的对象即可。 除了自定义span-method方法外，我们还可以通过设置column的属性来实现合并单元格。具体来说，我们可以在column中设置prop属性来指定需要合并的列，然后在需要合并的单元格中设置rowspan和colspan属性即可。例如，如果我们需要将第一列中相同的单元格合并，可以编写如下的column配置： ``` columns: [ { label: '入库编号', prop: 'batchNo', rowspan: ({ row, column, rowIndex, columnIndex }) => { if (columnIndex === 0) { let rowspan = 1; for (let i = rowIndex + 1; i < this.tableData.length; i++) { if (this.tableData[i][columnIndex] === this.tableData[rowIndex][columnIndex]) { rowspan++; } else { break; } } return rowspan; } } }, { label: '供应商', prop: 'supplierName', rowspan: ({ row, column, rowIndex, columnIndex }) => { if (columnIndex === 1) { let rowspan = 1; for (let i = rowIndex + 1; i < this.tableData.length; i++) { if (this.tableData[i][columnIndex] === this.tableData[rowIndex][columnIndex]) { rowspan++; } else { break; } } return rowspan; } } }, // 其他列的配置 ] ``` 在上述代码中，我们在column中设置了prop属性来指定需要合并的列，然后在需要合并的单元格中设置了rowspan属性来指定需要合并的行数。需要注意的是，rowspan属性可以是一个函数，该函数接收一个参数，该参数包含row、column、rowIndex和columnIndex四个属性，分别表示当前单元格所在的行、列以及行索引和列索引。在该函数中，我们可以根据需要返回需要合并的行数即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值