在HTML中,可以使用CSS来设置圆角表格,以下是一个简单的示例:
(图片来源网络,侵删)1、创建一个HTML文件,例如rounded_table.html
,并在其中添加以下内容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>圆角表格</title> <style> /* 设置表格样式 */ table { bordercollapse: collapse; width: 50%; margin: 0 auto; } /* 设置表头样式 */ th, td { border: 1px solid black; padding: 8px; textalign: left; } /* 设置表头背景颜色 */ th { backgroundcolor: #f2f2f2; } /* 设置单元格边框圆角 */ td { borderradius: 5px; } </style> </head> <body> <h1>圆角表格示例</h1> <table> <thead> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> <tr> <td>内容7</td> <td>内容8</td> <td>内容9</td> </tr> </tbody> </table> </body> </html>
2、保存文件后,用浏览器打开rounded_table.html
,你将看到一个带有圆角的表格。
在这个示例中,我们使用了内联样式来设置表格、表头和单元格的样式,你可以根据需要修改这些样式,例如改变边框颜色、宽度、圆角半径等。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。