html表格显示,一共三列,第一列宽度80px,第二列宽度60px,第三列宽度120px,表格头部高50px,内容每行高40px,且内容背景设置为单数行为0.5透明度,颜色白色,偶数行为0.1透明度,颜色灰色,表格通过json绘制

时间: 2024-03-27 14:39:04 浏览: 11
好的,以下是能够根据您提供的要求绘制出表格的 HTML 代码: ```html <table style="border-collapse: collapse; width: 260px;"> <thead style="height: 50px; background-color: #333333; color: white; font-weight: bold;"> <tr> <th style="width: 80px; border: 1px solid white;">列1</th> <th style="width: 60px; border: 1px solid white;">列2</th> <th style="width: 120px; border: 1px solid white;">列3</th> </tr> </thead> <tbody> <tr style="height: 40px; background-color: rgba(255, 255, 255, 0.5);"> <td style="border: 1px solid #333333;">内容1</td> <td style="border: 1px solid #333333;">内容2</td> <td style="border: 1px solid #333333;">内容3</td> </tr> <tr style="height: 40px; background-color: rgba(128, 128, 128, 0.1);"> <td style="border: 1px solid #333333;">内容4</td> <td style="border: 1px solid #333333;">内容5</td> <td style="border: 1px solid #333333;">内容6</td> </tr> <tr style="height: 40px; background-color: rgba(255, 255, 255, 0.5);"> <td style="border: 1px solid #333333;">内容7</td> <td style="border: 1px solid #333333;">内容8</td> <td style="border: 1px solid #333333;">内容9</td> </tr> <tr style="height: 40px; background-color: rgba(128, 128, 128, 0.1);"> <td style="border: 1px solid #333333;">内容10</td> <td style="border: 1px solid #333333;">内容11</td> <td style="border: 1px solid #333333;">内容12</td> </tr> </tbody> </table> ``` 其中,通过 JSON 绘制表格的代码如下: ```javascript const data = [ ['内容1', '内容2', '内容3'], ['内容4', '内容5', '内容6'], ['内容7', '内容8', '内容9'], ['内容10', '内容11', '内容12'] ]; const table = document.createElement('table'); table.style.cssText = 'border-collapse: collapse; width: 260px;'; const thead = document.createElement('thead'); thead.style.cssText = 'height: 50px; background-color: #333333; color: white; font-weight: bold;'; const trHead = document.createElement('tr'); const th1 = document.createElement('th'); th1.style.cssText = 'width: 80px; border: 1px solid white;'; th1.textContent = '列1'; trHead.appendChild(th1); const th2 = document.createElement('th'); th2.style.cssText = 'width: 60px; border: 1px solid white;'; th2.textContent = '列2'; trHead.appendChild(th2); const th3 = document.createElement('th'); th3.style.cssText = 'width: 120px; border: 1px solid white;'; th3.textContent = '列3'; trHead.appendChild(th3); thead.appendChild(trHead); table.appendChild(thead); const tbody = document.createElement('tbody'); for (let i = 0; i < data.length; i++) { const tr = document.createElement('tr'); tr.style.cssText = `height: 40px; background-color: ${i % 2 === 0 ? 'rgba(255, 255, 255, 0.5)' : 'rgba(128, 128, 128, 0.1)'};`; for (let j = 0; j < data[i].length; j++) { const td = document.createElement('td'); td.style.cssText = 'border: 1px solid #333333;'; td.textContent = data[i][j]; tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); ``` 其中,`data` 数组为表格的内容数据。

相关推荐

最新推荐

recommend-type

Scrapy-1.8.2.tar.gz

文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
recommend-type

search-log.zip

搜索记录,包括时间、搜索关键词等,用于PySpark案例练习
recommend-type

6-12.py

6-12
recommend-type

2-6.py

2-6
recommend-type

Scrapy-0.24.5-py2-none-any.whl

文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

2. 通过python绘制y=e-xsin(2πx)图像

可以使用matplotlib库来绘制这个函数的图像。以下是一段示例代码: ```python import numpy as np import matplotlib.pyplot as plt def func(x): return np.exp(-x) * np.sin(2 * np.pi * x) x = np.linspace(0, 5, 500) y = func(x) plt.plot(x, y) plt.xlabel('x') plt.ylabel('y') plt.title('y = e^{-x} sin(2πx)') plt.show() ``` 运行这段
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。