整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
.表格的宽度 高度 边框 <width> <height> <border>
2.表格的背景颜色和图片 <colcr>颜色背景图片颜色可通过<background> <bgcolor>背景颜色
3.表格以及单元格内容的对齐方式 <aligh>分为<right>右对齐 <center>居中对齐 <left>左对齐
4.单元格的填充和间距 <cellspacing>间距 <cellpadding>填充
5.<font>标签可以设置字体字号以及颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>优化表格</title>
</head>
<body>
<table border="0" width="395" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" background=""><font color="white"></font><b> 本周畅销笔记本排名top3<font></font></b></td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">京东超市/td>
</tr>
<tr>
<td colspan="2">< img src="img/1.jpg" alt=""></td>
</tr>
<tr>
<td>< img src="img/人.png" alt=""></td>
<td>< img src="img/罗宾.jpg" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
HTML表格的构建中，<tr>标签（表格行）扮演着基础而关键的角色。正确使用表格行不仅能够提升数据展示的清晰度，还可以通过各种技巧增强表格的功能性和交互性。本文将深入探讨如何高效利用<tr>标签，从而在网页设计中实现更精细、更专业的布局和表现。
在HTML中，<tr>标签用于定义表格的行。每个<tr>元素内部可以包含一或多个<td>（表格单元格）或<th>（表头单元格）元素，用于展示具体的数据或标题。
一个典型的表格行示例如下：
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
</tr>
<tr>
<td>1</td>
<td>王小明</td>
<td>前端开发</td>
</tr>
</table>
这个例子展示了如何使用<tr>来创建包含标题和一行数据的表格。
通过CSS，我们可以对表格行进行样式化，例如设置斑马线效果（条纹表格）、行悬停颜色等，以提升可读性和用户体验。
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
给表格行添加类或ID，可以更细致地控制特定行的样式，这对于突出显示某些数据非常有用。
可以通过JavaScript为表格行添加点击事件，达到如弹出详细信息、修改数据等交互效果。
document.querySelectorAll("tr").forEach(row => {
row.addEventListener("click", function() {
alert("你点击了一行！");
});
});
在需要动态修改表格内容的场景下，可以通过JavaScript动态地添加或删除表格行。
function addRow() {
const table = document.getElementById("myTable");
const row = table.insertRow(-1); // 插入到表格末尾
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
cell1.innerHTML = "新行单元格1";
cell2.innerHTML = "新行单元格2";
}
通过深入了解和运用<tr>标签，你可以大幅提升HTML表格的功能性和视觉吸引力。无论是数据密集型网站还是需要高度定制的用户界面，精通这些技巧将使你在网页开发中更加得心应手。
结尾部分：
希望本文的分享能帮助你更好地掌握HTML中的<tr>使用技巧，无论是基础的数据展示还是复杂的用户交互，都能通过你的代码得到完美的实现。不断实践，不断创新，让我们在编程的路上一起进步！
录
在前面一篇博客中我们介绍过关于python的表格数据处理方案，这其中的工作重点就是对表格类型的数据进行梳理、计算和展示，本文重点介绍展示这个方面的工作。首先我们看一个案例，定义一个数组形式的表格数据：
[dechin@dechin-manjaro table]$ ipython
Python 3.8.5 (default, Sep 4 2020, 07:30:14)
Type 'copyright', 'credits' or 'license' for more information
IPython 7.19.0 -- An enhanced Interactive Python. Type '?' for help.
In [1]: table=[('a',1,2,3),('b',2,3,4)]
In [2]: print(table)
[('a', 1, 2, 3), ('b', 2, 3, 4)]当我们直接打印这个表格数据的时候，发现效果非常的难看。虽然我们可以从这个表格中获取到同样的信息，但是这种数据展示的方法对于我们直接从打印输出中获取数据是非常不利的。
首先介绍一个工具tabulate，可以直接打印数组格式的表格数据，并且有多种输出格式可选。安装方法同样可以用pip来进行管理：
[dechin@dechin-manjaro table]$ python3 -m pip install tabulate
Requirement already satisfied: tabulate in /home/dechin/anaconda3/lib/python3.8/site-packages (0.8.9)安装很容易，也没有其他依赖。接下来我们用ipython来展示一些基本用法：
[dechin@dechin-manjaro table]$ ipython
Python 3.8.5 (default, Sep 4 2020, 07:30:14)
Type 'copyright', 'credits' or 'license' for more information
IPython 7.19.0 -- An enhanced Interactive Python. Type '?' for help.
In [1]: from tabulate import tabulate
In [2]: import numpy as np
In [3]: header=['index']+list(range(4)) # 表头的定义
In [4]: header
Out[4]: ['index', 0, 1, 2, 3]
In [8]: table=[('Alice',1,2,3,4),('Bob',2,3,4,5)] # 表格内容的定义
In [9]: table
Out[9]: [('Alice', 1, 2, 3, 4), ('Bob', 2, 3, 4, 5)]
In [11]: print(tabulate(table,headers=header,tablefmt='grid')) # 用grid的格式打印表格内容
+---------+-----+-----+-----+-----+
| index | 0 | 1 | 2 | 3 |
+=========+=====+=====+=====+=====+
| Alice | 1 | 2 | 3 | 4 |
+---------+-----+-----+-----+-----+
| Bob | 2 | 3 | 4 | 5 |
+---------+-----+-----+-----+-----+
In [12]: print(tabulate(table,headers=header,tablefmt='fancy_grid')) # 用fancy_grid的格式打印
╒═════════╤═════╤═════╤═════╤═════╕
│ index │ 0 │ 1 │ 2 │ 3 │
╞═════════╪═════╪═════╪═════╪═════╡
│ Alice │ 1 │ 2 │ 3 │ 4 │
├─────────┼─────┼─────┼─────┼─────┤
│ Bob │ 2 │ 3 │ 4 │ 5 │
╘═════════╧═════╧═════╧═════╧═════╛在这个案例中，我们分别产生了数组格式的表头和表格内容，然后用tabulate进行封装之后再打印出来。由于tabulate支持多种格式的输出，这里我们展示的仅有grid和fancy_grid两种个人比较喜欢的格式。其他类型的格式还有：
"plain"
"simple"
"github"
"grid"
"fancy_grid"
"pipe"
"orgtbl"
"jira"
"presto"
"psql"
"rst"
"mediawiki"
"moinmoin"
"youtrack"
"html"
"latex"
"latex_raw"
"latex_booktabs"
"textile"类似于tabulate的，prettytable的主要目的也是规范化的美化表格数据的输出，但是在使用方法上略有差异，在不同的场景下可以使用不同的方案。这里我们先看一下prettytable的安装，同样可以使用pip来进行管理：
[dechin@dechin-manjaro table]$ python3 -m pip install prettytable
Collecting prettytable
Downloading prettytable-2.1.0-py3-none-any.whl (22 kB)
Requirement already satisfied: wcwidth in /home/dechin/anaconda3/lib/python3.8/site-packages (from prettytable) (0.2.5)
Installing collected packages: prettytable
Successfully installed prettytable-2.1.0安装完成后我们用一个py文件的示例来展示其用法：
# pt_test.py
from prettytable import PrettyTable
tb = PrettyTable() # 生成表格对象
tb.field_names = ['Index', 0, 1, 2, 3] # 定义表头
tb.add_row(['Alice',1,2,3,4]) # 添加一行，列是column
tb.add_row(['Bob',2,3,4,5])
print (tb) # 打印输出代码的执行结果如下：
[dechin@dechin-manjaro table]$ python3 pt_test.py
+-------+---+---+---+---+
| Index | 0 | 1 | 2 | 3 |
+-------+---+---+---+---+
| Alice | 1 | 2 | 3 | 4 |
| Bob | 2 | 3 | 4 | 5 |
+-------+---+---+---+---+
由于使用的案例跟上面介绍的tabulate是一样的，所以输出结果也类似，相当于多了一种输出格式。但是除了输出格式之外，我们发现prettytable可以很好地利用行和列的添加的形式来进行表格操作，操作习惯更接近于数据库的操作形式，因此对于经常使用数据库的人而言，prettytable可能是一种更好的表格数据输出解决方案。
本文介绍了两种表格数据的打印工具：tabulate和prettytable的安装与基本使用方法。由于表格数据本身是没有对输出格式进行规范化的，因此打印出来的数据会显得比较杂乱，不利于直观的阅读。因此引入这两种工具，加强了输出结果的可读性。这两者在使用上各有优劣，tabulate支持更多形式的表格样式，而prettytable则使用了更加接近于数据库的操作形式，对于部分用户而言有天然的生态优势。
本文首发链接为：https://www.cnblogs.com/dechinphy/p/table.html
作者ID：DechinPhy
更多原著文章请参考：https://www.cnblogs.com/dechinphy/
打赏专用链接：https://www.cnblogs.com/dechinphy/gallery/image/379634.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
