使用原生html＜table＞构造复杂table表
以下是一个使用原生HTML构建复杂表格的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Complex Table Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Complex Table Example</h2>
<table style="width:100%">
<caption>User Information</caption>
<colgroup>
<col style="background-color:#f2f2f2;">
<col style="background-color:#f2f2f2;">
<col>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Footer information here.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>jane@example.com</td>
<td>Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</td>
</tr>
<!-- More rows as needed -->
</tbody>
</table>
</body>
</html>这个示例展示了如何创建带有标题、脚注、列组和跨行跨列的表格。它使用了<colgroup>来对列进行样式设置，并通过CSS为表格添加了边框和内填充。
评论已关闭