首页用html写一个页面，其中包括一个居中的表格用来展示数据，同时包括一个退出按钮和一个查询按钮并且居中显示

用html写一个页面，其中包括一个居中的表格用来展示数据，同时包括一个退出按钮和一个查询按钮并且居中显示

时间: 2024-01-21 14:16:53 浏览: 62

以下是一个用 HTML 编写的页面，其中包括了一个居中的表格用来展示数据，同时包括一个退出按钮和一个查询按钮并且居中显示的示例代码： ```html <!DOCTYPE html> <html> <head> <title>居中的表格和按钮</title> <style> body { text-align: center; /* 将页面文字居中 */ } table { margin: 0 auto; /* 将表格居中 */ border-collapse: collapse; /* 合并表格边框 */ } th, td { border: 1px solid black; /* 设置表格边框 */ padding: 5px; /* 设置表格内边距 */ } button { margin-top: 20px; /* 按钮距离表格的距离 */ } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> </tr> </tbody> </table> <button>查询</button> <button>退出</button> </body> </html> ``` 解释： - `text-align: center;` 将页面文字居中对齐。 - `margin: 0 auto;` 将表格设置为居中，并且左右外边距为 "auto" 时，会使其水平居中。 - `border-collapse: collapse;` 合并表格边框，使其更美观。 - `th, td` 设置表格单元格的边框和内边距。 - `margin-top: 20px;` 设置按钮距离表格上方的距离。

阅读全文