css table格式化 |css最好的书籍

/*CSS样式*/
table{
width: 100%;
border-collapse: collapse;
}
th,td{
border: 1px solid #CCC;
padding: 10px;
text-align: center;
}
th{
background-color: #EEE;
font-weight: bold;
}
tr:nth-child(odd){
background-color: #F2F2F2;
}

上述代码是一个基本的CSS表格样式，包括设置表格宽度、边框样式、单元格内边距与文字居中等基本样式，还有通过奇偶行的不同颜色来使得表格更加易读。

除了基本样式外，大家还可以通过CSS增加一些高级的样式效果。例如，大家可以通过hover伪类来为表格添加交互触发效果，同时给予表格用户更加良好的用户体验。示例代码如下：

/*CSS样式*/
tr:hover{
background-color: #CCC;
color: #FFF;
cursor: pointer;
}
td:hover{
background-color: #FFF;
color: red;
}

当鼠标移动到表格行（tr）上时，背景色和文字颜色发生变化，同时鼠标指针变为手型，表示用户可以点击，从而使得表格更加实用。当鼠标移动到单元格（td）上时，单元格背景色变为白色，文字颜色变为红色，用户可以更加清楚地看到某一信息。

CSS表格格式化使得表格以可视化的方式加强了数据展示效果，可以使得数据信息更加美观、清晰和易读，同时提高了用户访问网站的体验。