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

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

news 2026/2/11 5:03:03

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2026/2/5 4:23:32

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/2/10 9:20:22

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

【Java学习笔记】BigInteger 和 BigDecimal 类

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

编程新知 2025/11/8 15:39:00

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18