知识问答
如何利用div和CSS实现表格布局的代码？
2025-09-22 02:19:14
来源：互联网转载
``
html，，，，，，Table布局示例，， table {， width: 100%;， border-collapse: collapse;， }， th, td {， border: 1px solid black;， padding: 8px;， text-align: left;， }，，，，，，表头1，表头2，表头3，，，数据1，数据2，数据3，，，数据4，数据5，数据6，，，，，``<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Div+CSS Table布局示例</title> <style> /* 全局样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* 表格容器样式 */ .table-container { display: table; width: 100%; border-collapse: collapse; } /* 单元格样式 */ .table-cell { display: table-cell; padding: 10px; border: 1px solid #ccc; } /* 标题样式 */ h2 { text-align: center; margin-bottom: 20px; } /* 单元表格样式 */ .unit-table { width: 50%; margin: auto; border-collapse: collapse; } .unit-table th, .unit-table td { border: 1px solid #ccc; padding: 10px; text-align: center; } /* 问题与解答栏目样式 */ .qa-section { width: 80%; margin: 40px auto; } .qa-question { font-weight: bold; margin-bottom: 10px; } </style></head><body> <!-主表格 --> <p class="table-container"> <p class="table-cell"> <h2>标题1</h2> <!-单元表格 --> <table class="unit-table"> <tr> <th>列1</th> <th>列2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> <tr> <td>数据3</td> <td>数据4</td> </tr> </table> </p> <p class="table-cell"> <h2>标题2</h2> <!-单元表格 --> <table class="unit-table"> <tr> <th>列1</th> <th>列2</th> </tr> <tr> <td>数据5</td> <td>数据6</td> </tr> <tr> <td>数据7</td> <td>数据8</td> </tr> </table> </p> </p> <!-问题与解答栏目 --> <p class="qa-section"> <p class="qa-question">问题1：如何使用Div+CSS实现表格布局？</p> <p class="qa-answer">答案1：通过使用display属性设置为table和table-cell，可以创建类似表格的布局，可以使用border属性设置边框样式。</p> <p class="qa-question">问题2：如何使单元格内的内容居中？</p> <p class="qa-answer">答案2：可以通过为单元格添加text-align属性并设置为center来实现内容居中。</p> </p></body></html>
