一、使用CSS样式美化表格
1、使用CSS选择器选中表格,并设置表格的边框宽度、样式和颜色,如下:
table { border-collapse: collapse; /* 合并边框 */ border-width: 1px; /* 边框宽度 */ border-style: solid; /* 边框样式 */ border-color: #ccc; /* 边框颜色 */ }
2、为表格的奇偶行设置不同的背景色,提高表格可读性,如下:
tr:nth-child(odd) { /* 奇数行 */ background-color: #f9f9f9; } tr:nth-child(even) { /* 偶数行 */ background-color: #fff; }
二、使用CSS样式优化表格
1、单元格内的文本过长时,会对表格宽度造成影响,可以使用CSS属性 word-break
和 text-overflow
控制文本内容的显示,如下:
td { white-space: nowrap; /* 防止单元格文本换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分用省略号表示 */ word-break: break-all; /* 单词过长自动换行 */ }
2、当表格宽度较小时,表格可能会出现横向滚动条,可以使用CSS属性 min-width
设置表格的最小宽度,避免表格压缩变形,如下:
table { min-width: 500px; /* 设置表格最小宽度 */ }
三、使用CSS样式添加表格样式
1、为表格标题添加样式,如下:
caption { font-size: 16px; /* 字号设置 */ font-weight: bold; /* 加粗 */ text-align: left; /* 居左 */ }
2、为表头单元格添加背景色和居中对齐,如下:
th { background-color: #ccc; /* 表头背景色 */ text-align: center; /* 居中对齐 */ }
3、为表格单元格添加鼠标移上去的效果,如下:
td:hover { background-color: #ffff99; /* 鼠标移上去背景色 */ }
四、使用CSS样式合并单元格
1、使用CSS属性 rowspan
合并表格行,如下:
<td rowspan="2">单元格内容</td>
2、使用CSS属性 colspan
合并表格列,如下:
<td colspan="2">单元格内容</td>
五、完整示例代码
HTML:
<table> <caption>表格标题</caption> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> </table>
CSS:
table { border-collapse: collapse; /* 合并边框 */ border-width: 1px; /* 边框宽度 */ border-style: solid; /* 边框样式 */ border-color: #ccc; /* 边框颜色 */ min-width: 500px; /* 设置表格最小宽度 */ } tr:nth-child(odd) { /* 奇数行 */ background-color: #f9f9f9; } tr:nth-child(even) { /* 偶数行 */ background-color: #fff; } td { white-space: nowrap; /* 防止单元格文本换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分用省略号表示 */ word-break: break-all; /* 单词过长自动换行 */ } caption { font-size: 16px; /* 字号设置 */ font-weight: bold; /* 加粗 */ text-align: left; /* 居左 */ } th { background-color: #ccc; /* 表头背景色 */ text-align: center; /* 居中对齐 */ } td:hover { background-color: #ffff99; /* 鼠标移上去背景色 */ }