一、使用CSS样式美化表格的边框
细致的边框能够让表格更加清晰易读，我们可以通过CSS样式来美化表格的边框。使用CSS样式修改表格边框的方法是：
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
border: 1px solid #ccc;
}
其中，border-collapse: collapse;用于合并相邻单元格的边框，border-spacing: 0;用于设置单元格之间的距离为0，border: 1px solid #ccc;用于设置单元格边框的样式。
二、使用CSS样式更改表格字体和文字颜色
修改表格文字样式可以让表格更加美观，同时也可以使表格更加易读。我们可以通过使用CSS样式修改表格字体和文字颜色的方法是：
table {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
其中，font-family用于设置字体样式，font-size用于设置字体大小，color用于设置文字颜色。
三、使用CSS样式为表格添加背景颜色和斑马线效果
使用背景颜色和斑马线效果能够让表格更加美观，同时也能够使表格更加易读。我们可以通过使用CSS样式为表格添加背景颜色和斑马线效果的方法是：
table {
background: #f9f9f9;
}
tr:nth-child(even) {
background: #fff;
}
tr:nth-child(odd) {
background: #f2f2f2;
}
其中，background用于设置表格的背景颜色，tr:nth-child(even)用于选中偶数行，tr:nth-child(odd)用于选中奇数行。我们可以为偶数行和奇数行设置不同的样式实现斑马线效果。
四、使用CSS样式合并表格单元格
有些情况下，可能需要合并表格单元格来展示更加复杂的数据。我们可以通过使用CSS样式合并表格单元格的方法是：
2个单元格合并为1个单元格
2行单元格合并为1个单元格
其中，colspan用于水平方向合并单元格，rowspan用于垂直方向合并单元格，需要合并的单元格可以在HTML代码中进行定义。
五、使用CSS样式为表格添加排序功能
在表格中添加排序功能可以让表格更加实用，我们可以通过使用CSS样式为表格添加排序功能的方法是:
table.sortable th {
cursor: pointer;
}
table.sortable th:after {
content: " ▾";
}
table.sortable th.asc:after {
content: " ▴";
}
table.sortable th.desc:after {
content: " ▾";
}
其中，cursor: pointer;用于将鼠标样式设置为手型，content用于在表格头部添加排序箭头。
以上是使用CSS对HTML表格的优化方法，我们可以根据实际情况对表格进行功能和样式的修改，以达到更佳的表现效果。
完整代码示例
CSS优化HTML表格的呈现效果
table {
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
background: #f9f9f9;
}
th, td {
border: 1px solid #ccc;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background: #fff;
}
tr:nth-child(odd) {
background: #f2f2f2;
}
table.sortable th {
cursor: pointer;
}
table.sortable th:after {
content: " ▾";
}
table.sortable th.asc:after {
content: " ▴";
}
table.sortable th.desc:after {
content: " ▾";
}
姓名
性别
年龄
城市
张三
男
28
北京
李四
女
26
上海
王五
男
32
广州
赵六
女
29
深圳
document.querySelectorAll('th').forEach(function(th) {
th.addEventListener('click', function() {
var table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(function(tr) { table.appendChild(tr) });
})
})
function comparer(index, asc) {
return function(a, b) {
return (a = a.children[index].textContent, b = b.children[index].textContent, isNaN(a - b) ? a.localeCompare(b) : a - b) * (asc ? 1 : -1)
}
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/153183.html
微信扫一扫 
支付宝扫一扫 