html表格显示,一共三列,第一列宽度80px,第二列宽度60px,第三列宽度120px,表格头部高50px,内容每行高40px,且内容背景设置为单数行为0.5透明度,颜色白色,偶数行为0.1透明度,颜色灰色,表格通过json绘制
时间: 2024-03-27 07:39:04 浏览: 52
好的,以下是能够根据您提供的要求绘制出表格的 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` 数组为表格的内容数据。
阅读全文