企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## **初始代码** ``` <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> ``` ![](https://img.kancloud.cn/02/01/02017d5faa71190f4102093d62fbfaf4_213x97.png) ## **边框** ``` table,th,td { border:1px solid black; } ``` ![](https://img.kancloud.cn/44/a4/44a4fcf564751d2e9d41a1820695cb0d_236x122.png) ## **折叠边框** ``` table { border-collapse: collapse; } table, td, th { border: 1px solid black; } ``` ![](https://img.kancloud.cn/2c/0d/2c0d0815ecae69a2bdeaff36af69d84e_179x93.png) ## **表格宽度和高度** ``` table { width:100%; } th { height:50px; } ``` ![](https://img.kancloud.cn/d4/da/d4da0db483e68a8d71f4e263ff918691_852x195.png) ## **表格文字对齐** ``` td { text-align:right; } ``` ![](https://img.kancloud.cn/db/f8/dbf8d01a3bcb613bf812830662618b24_254x158.png) ## **表格填充** ``` td { padding:15px; } ``` ![](https://img.kancloud.cn/69/dd/69ddd0d8531f81f7c9d6417171ed9932_297x265.png) ## **表格颜色** ``` table, td, th { border:1px solid green; } th { background-color:green; color:white; } ``` ![](https://img.kancloud.cn/98/c1/98c133ba18559a6d73fabec64c5f5536_248x149.png) ## **指定表格说明文字的位置** ![](https://img.kancloud.cn/2e/4a/2e4a98058432578739e8f1859ac93a8f_191x123.png) 将说明文字放到表格下面 ``` caption {caption-side:bottom;} ``` ![](https://img.kancloud.cn/e5/ae/e5ae74abfe078be64b84fe93a0087233_195x116.png)