html如何改变表格

### 1. 边框和颜色

为了让表格更加突出，我们可以给表格添加边框和背景颜色，这样做不仅能让表格看起来更加整洁，还能帮助用户更好地区分不同的数据区域。

```html

```

### 2. 条纹效果

给表格添加条纹效果可以让表格看起来更加活泼，也有助于用户区分不同的行。

```css

tr:nth-child(even) {

background-color: #f9f9f9;

```

### 3. 鼠标悬停效果

当用户将鼠标悬停在表格的某一行时，我们可以改变该行的颜色，这样可以给用户一个视觉反馈，告诉他们当前正在查看哪行数据。

```css

tr:hover {

background-color: #ddd;

```

### 4. 响应式表格

在移动设备上查看表格时，我们可能需要让表格更加适应屏幕大小，这时，我们可以使用CSS媒体查询来实现响应式设计。

```css

@media screen and (max-width: 600px) {

td, th {

display: block; /* 将单元格设置为块级元素 */

}

```

### 5. 表格排序功能

我们希望用户能够根据某一列的数据来对表格进行排序，虽然这通常需要JavaScript的支持，但我们可以通过CSS来给可排序的列添加一些视觉提示。

```css

th {

cursor: pointer; /* 鼠标悬停时显示指针 */

th:hover {

background-color: #3e8e41; /* 鼠标悬停时改变背景色 */

```

### 6. 自定义字体和图标

为了让表格看起来更加个性化，我们可以使用自定义字体和图标，这可以通过引入外部字体库（如Google Fonts）和图标库（如Font Awesome）来实现。

```html

```

然后在表格中使用这些字体和图标：

```html