47、HTML与CSS表格及列表样式优化指南

HTML与CSS表格及列表样式优化指南

在网页设计中，表格和列表是常用的元素，通过合理运用HTML和CSS，我们可以对它们的样式进行优化，提升页面的美观度和可读性。下面，我们将详细介绍相关的操作方法和技巧。

1. 表格边框处理

在CSS中， border-collapse 属性可以解决表格边框的间距问题。具体操作步骤如下：

table {
    margin-left: 20px;
    margin-right: 20px;
    border: thin solid black;
    caption-side: bottom;
    border-collapse: collapse;
}

操作步骤：
1. 在CSS文件（如 “journal.css”）中添加以上代码。
2. 保存文件并重新加载页面，即可看到表格边框合并的效果。

添加该属性后，浏览器会忽略之前设置的边框间距，并将相邻的边框合并为一个，使表格看起来更加整洁。

2. 表格文本对齐

若要对表格中的文本进行对齐设置，比如将日期、温度和餐厅评分居中对齐，海拔和人口右对齐，可以按照以下步骤操作：
1. 创建两个类，分别用于居中对齐和右对齐。

.center {
    text-align: center;
}
.right {
    text-align: right;
}