在HTML中,可以使用CSS样式来居中表格,下面是一个示例代码,包括小标题和单元表格的居中显示:
(图片来源网络,侵删)<!DOCTYPE html> <html> <head> <style> /* 样式表 */ .centertable { display: flex; justifycontent: center; alignitems: center; height: 100vh; /* 使表格垂直居中 */ } /* 表格样式 */ table { bordercollapse: collapse; /* 合并边框 */ width: 50%; /* 设置表格宽度 */ } th, td { border: 1px solid black; /* 设置边框样式 */ padding: 8px; /* 设置单元格内边距 */ textalign: left; /* 设置文本对齐方式 */ } </style> </head> <body> <div class="centertable"> <!小标题 > <h2>表格标题</h2> <!单元表格 > <table> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr> </table> </div> </body> </html>
在上面的示例代码中,我们使用了CSS样式来居中表格,通过将包含表格的<div>
元素设置为display: flex
、justifycontent: center
和alignitems: center
,使其水平和垂直居中,使用height: 100vh
将表格的高度设置为视口的高度,以确保表格完全占据整个页面,接下来,我们定义了表格的样式,包括边框样式、单元格内边距和文本对齐方式等,在<div class="centertable">
内部添加小标题和单元表格即可实现居中显示的效果。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。