当前位置： 首页 > news >正文

html/javascript-表格的创建和使用

news 2025/9/14 6:54:26

html中表格的创建和使用

    • 一 摘要
    • 二 使用html table标签创建表格（在html文件中）
    • 三 使用javascript创建表格（在js文件中）
    • 四 表格属性的设置：
    • 4.1. 右边框的设置：
    • 4.2. 只给表格单元格加右边框
    • 4.3. 动态设置右边框的风格

一 摘要

html经常使用到表格table。在HTML中创建和使用表格，可以直接在html定义标签，也可以使用DOM（文档对象模型）来动态创建和操作表格元素。

二 使用html table标签创建表格（在html文件中）

<table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 4</td><td>Data 5</td><td>Data 6</td></tr>
</table>

三 使用javascript创建表格（在js文件中）

下面是一个示例，展示了如何使用JavaScript创建一个简单的表格并向其添加数据：

function createTable() {// 创建一个table元素var table = document.createElement("table");// 创建表头行var headerRow = document.createElement("tr");// 创建表头单元格var headerCell1 = document.createElement("th");headerCell1.innerHTML = "Header 1";headerRow.appendChild(headerCell1);var headerCell2 = document.createElement("th");headerCell2.innerHTML = "Header 2";headerRow.appendChild(headerCell2);var headerCell3 = document.createElement("th");headerCell3.innerHTML = "Header 3";headerRow.appendChild(headerCell3);// 将表头行添加到表格中table.appendChild(headerRow);// 创建数据行1var dataRow1 = document.createElement("tr");// 创建数据单元格1var dataCell1_1 = document.createElement("td");dataCell1_1.innerHTML = "Data A";dataRow1.appendChild(dataCell1_1);// 创建数据单元格2var dataCell1_2 = document.createElement("td");dataCell1_2.innerHTML = "Data B";dataRow1.appendChild(dataCell1_2);// 创建数据单元格3var dataCell1_3 = document.createElement("td");dataCell1_3.innerHTML = "Data C";dataRow1.appendChild(dataCell1_3);// 将数据行1添加到表格中table.appendChild(dataRow1);// 创建数据行2var dataRow2 = document.createElement("tr");// 创建数据单元格4var dataCell2_1 = document.createElement("td");dataCell2_1.innerHTML = "Data X";dataRow2.appendChild(dataCell2_1);// 创建数据单元格5var dataCell2_2 = document.createElement("td");dataCell2_2.innerHTML = "Data Y";dataRow2.appendChild(dataCell2_2);// 创建数据单元格6var dataCell2_3 = document.createElement("td");dataCell2_3.innerHTML = "Data Z";dataRow2.appendChild(dataCell2_3);// 将数据行2添加到表格中table.appendChild(dataRow2);// 将表格添加到页面中的body部分document.body.appendChild(table);
}

四 表格属性的设置：

4.1. 右边框的设置：

可以使用CSS样式来给table单元格加边框，具体方法如下：

  1. 在CSS样式中设置table的边框样式和宽度：
table {border-collapse: collapse; /* 合并边框 */border: 1px solid #ccc; /* 边框样式和颜色 */
}
  1. 在CSS样式中设置td单元格的边框样式和宽度：
td {border: 1px solid #ccc; /* 边框样式和颜色 */
}

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Table Border</title><style>table {border-collapse: collapse;border: 1px solid #ccc;}td {border: 1px solid #ccc;}</style>
</head>
<body><table><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr></table>
</body>
</html>

4.2. 只给表格单元格加右边框

可以使用CSS来给表格单元格加边框。如果只想给表格单元格加右边框，可以使用以下CSS代码：

td {border-right: 1px solid black;
}

这会给所有表格单元格添加一个1像素宽的黑色实线右边框。如果只想给特定的表格单元格添加右边框，可以使用类或ID选择器来选择特定的单元格，例如：

td.right-border {border-right: 1px solid black;
}

这会给所有带有“right-border”类的表格单元格添加一个1像素宽的黑色实线右边框。在HTML中，可以将该类添加到要添加右边框的单元格中：

<td class="right-border">单元格内容</td>

4.3. 动态设置右边框的风格

要动态设置右边框的风格，可以使用JavaScript来实现。具体步骤如下：

  1. 获取需要设置右边框的元素。

  2. 使用JavaScript的style属性来设置元素的border-right属性。

  3. 根据需要设置不同的右边框风格，可以使用以下属性：

    • border-right-style：设置右边框的样式，如solid、dashed、dotted等。

    • border-right-width：设置右边框的宽度，可以使用像素值或者百分比。

    • border-right-color：设置右边框的颜色，可以使用颜色名称、RGB值或者十六进制值。

  4. 在需要改变右边框风格的时候，调用JavaScript代码来修改元素的border-right属性即可。

以下是一个示例代码，可以动态设置一个元素的右边框为红色实线：

// 获取需要设置右边框的元素
var element = document.getElementById("myElement");// 设置右边框的样式、宽度和颜色
element.style.borderRightStyle = "solid";
element.style.borderRightWidth = "1px";
element.style.borderRightColor = "red";

需要注意的是，如果需要设置多个元素的右边框风格，可以使用循环来遍历每个元素并设置其border-right属性。

相关文章：

html/javascript-表格的创建和使用

html中表格的创建和使用 一 摘要二 使用html table标签创建表格&#xff08;在html文件中&#xff09;三 使用javascript创建表格&#xff08;在js文件中&#xff09;四 表格属性的设置&#xff1a;4.1. 右边框的设置&#xff1a;4.2. 只给表格单元格加右边框4.3. 动态设置右边…...

编程日记 2023/7/29 13:48:40

[点微]同城原生微信小程序 小程序原生版 1.0.7(tom_xiaofenlei)

注意！！！这是点微后出的原生版小程序！！！ 依赖点微同城分类主插件、点微同城小程序后端插件！！！ 【以下为模块路径】 同城首页 pages/index/index 个人中心 pages/index/my 好店首页 pages/module/tcshop 商城首页 pages/module/tcmall 抢购首页 pages/module/tcqianggou…...

编程日记 2023/7/29 13:47:37

JDBC Some Templates

JDBCTemplate 是Spring对JDBC的封装&#xff0c;使用JDBCTemplate方便实现对数据的操作。 <!-- orm:Object relationship mapping m对象 关系 映射-->引入依赖 <!-- 基于Maven依赖的传递性&#xff0c;导入spring-content依赖即可导入当前所需的所有…...

编程日记 2023/7/29 13:46:36

dubbo启动指定ip不使用docker虚拟网络ip

java -D 配置系统属性 # 启动时加参数 -DDUBBO_IP_TO_REGISTRY 192.168.1.1 该ip为dubbo所在服务器的公网ip即可。 java -jar myDubboRpc-api.jar -DDUBBO_IP_TO_REGISTRY 192.168.1.1 # xjar启动 nohup ./xjar java -DDUBBO_IP_TO_REGISTRY11.22.33.44 -XX:UseG1GC -jar …...

编程日记 2023/7/29 13:45:35

Bobo String Construction

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;给出一字符串t&#xff0c;求一个长为n的字符串&#xff0c;使tst中包含且仅包含两个t 1<n<1000;测试样例组数<1000 思路&#xff1a;一开始很容易想到如果t里有1&#xff0c;s就全0&#xff0c;否则s就全…...

编程日记 2023/7/29 13:44:34

基于java在线个人网站源码设计与实现

摘 要 随着社会及个人社交应用平台的飞速发展&#xff0c;人们的沟通成本逐渐降低&#xff0c;互联网信息的普及也进一步提升了人们对于信息的需求度&#xff0c;通过建立个人网站的方式来展示自己的生活信息同时利用平台结交新的朋友&#xff0c;借助个人网站平台的搭建不仅可…...

编程日记 2023/7/29 13:43:32

Ubuntu18.04下编译qgc源码

写在前面 在下载前必须说明&#xff0c;根据你的qgc源码版本进行下载&#xff0c;有的源码必须要求Qt是5.15版本以上。 个人所使用开发软件 版本QT5.12.9qgc源码V4.0Ubuntu18.04 QT下载 &#xff08;1&#xff09;我们可以去官网下载官网下载地址具体的下载方法这里不用多说&a…...

编程日记 2023/7/29 13:42:31

Ros2_windows_install的学习笔记

Ros2_windows_install安装 Iron安装 iex ((New-Object System.Net.WebClient).DownloadString(https://raw.githubusercontent.com/scottcandy34/ros2_windows_install/main/ros2_iron.ps1))启动Iron C:\dev\ros2_iron\local_setup.bat...

编程日记 2023/7/29 13:41:30

5、Kubernetes核心技术 - Controller控制器工作负载

目录 一、Deployments - 控制器应用 二、Deployment升级回滚和弹性收缩 2.1、创建一个 1.14 版本的 pod 2.2、应用升级 2.3、查看升级状态 2.4、查看历史版本 2.5、应用回滚 2.6、弹性伸缩 三、StatefulSet - 有状态应用 四、DaemonSet - 守护进程 五、Job - 单次任…...

编程日记 2023/7/29 13:40:29

【java设计模式】创建型模式介绍（工厂模式、抽象工厂模式、单例模式、建造者模式、原型模式）

文章目录 简介一、工厂模式介绍案例 二、抽象工厂模式介绍案例 三、单例模式介绍案例 四、建造者模式介绍案例 五、原型模式介绍案例 简介 本文介绍Java设计模式中创建型模式的五种 一、工厂模式 工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式…...

编程日记 2023/7/29 13:39:27

Redis系列：Redis 的事务机制

1 复习下何为事务机制&#xff1f; Transaction&#xff08;事务&#xff09;是计算机的特有术语&#xff0c;它一般指单个逻辑工作单位&#xff0c;由一系列的操作组合而成&#xff0c;在这些操作执行的时候&#xff0c;要么都执行成功&#xff0c;要么都不执行&#xff0c;防…...

编程日记 2023/7/29 13:38:25

动静态网页、Django创建表关系、Django框架的请求生命周期流程图

一、request对象的几个方法 在视图函数中写方法的时候&#xff0c;都会有一个形参requestdef index(request):passrequest.method # GET POST request.GET.get() # 它获取最后一个元素值 request.GET.getlist() # 获取到所有的request.POST.get() # 它获取最后一个元素值 req…...

编程日记 2023/7/29 13:37:24

神经网络的初始化方法

文章目录 1、随机初始化2、Xavier初始化3、He初始化4、权重预训练初始化5、零初始化 对于神经网络的训练过程中&#xff0c;合适的参数初始化方法有助于更好的处理梯度消失和梯度爆炸问题。通常有以下几种初始化方法&#xff1a; 1、随机初始化 随机初始化&#xff08;Random…...

编程日记 2023/7/29 13:36:22

【SQL Server】DBCC CHECKDB只是一个数据库维护命令吗？

日期&#xff1a;2023年7月27日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…...

编程日记 2023/7/29 13:35:19

三、Web安全相关知识

请勿用于非法用途 文章目录 一、Web源码框架二、目录结构1、静态资源2、WEB-INF&#xff08;1&#xff09;classes&#xff08;2&#xff09;lib&#xff08;3&#xff09;web.xml 二、web脚本语言1、脚本种类&#xff08;1&#xff09;ASP&#xff08;2&#xff09;ASP.NET&am…...

编程日记 2023/7/29 13:34:17

Android系统服务之AMS

目录 概述 重点和难点问题 启动方式 main入口&#xff1a; run方法&#xff1a; BootstrapSevices 小结&#xff1a; 与其他线程的通信原理 参考文档&#xff1a; 概述 AMS是Android系统主要负责四大组件的启动&#xff0c;切换&#xff0c;调度以及应用程序进程管理和调度等工…...

编程日记 2023/7/29 13:33:16

Unity UGUI的EventTrigger (事件监听器)组件的介绍及使用

Unity UGUI的EventTrigger (事件监听器)组件的介绍及使用 1. 什么是EventTrigger组件&#xff1f; EventTrigger是Unity UGUI中的一个组件&#xff0c;用于监听和响应UI元素的各种事件&#xff0c;例如点击、拖拽、进入、离开等。通过EventTrigger组件&#xff0c;我们可以方…...

编程日记 2023/7/29 13:32:15

Matlab的SimuLink对FS32K144编程--内部数据存储Flash

​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ 前言 Flah擦写是由寿命的&#xff0c;应当减免无效的擦写&#xff0c;如数据值不变不进行擦写 1、新建工程完成后&#xff0c;拖出Flash的存储控制初始化…...

编程日记 2023/7/29 13:31:13

【MySQL】centos 7下MySQL的环境搭建

从本期博客开始我们正式进入到数据库的学习&#xff0c;在学习数据库时所用到的工具是Linux环境下的MySQL 目录 一、检查环境中是否装有MySQL 二、获取MySQL官方yum源 三、配置MySQL官方yum源 四、一键安装MySQL 五、启动mysql服务 六、登录MySQL 七、修改mysql配置文件…...

编程日记 2023/7/29 13:30:10

【SpringCloud Alibaba】（四）使用 Feign 实现服务调用的负载均衡

在上一文中&#xff0c;我们实现了服务的自动注册与发现功能。但是还存在一个很明显的问题&#xff1a;如果用户微服务和商品微服务在服务器上部署多份的话&#xff0c;之前的程序无法实现服务调用的负载均衡功能。 本文就带着大家一起实现服务调用的负载均衡功能 1. 负载均衡…...

编程日记 2023/7/29 13:29:10

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/9/9 3:54:19

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/8/18 10:21:48

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/8/10 20:17:44

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/9/2 4:01:22

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/9/9 14:49:22

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/9/13 11:37:54

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/9/9 10:10:31

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/6 0:10:01

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/9/5 8:29:07