使用表格元素指定表格
时间: 2024-11-22 11:35:11 浏览: 4
uniapp 表格的介绍和使用
5星 · 资源好评率100%
在HTML中,可以使用`<table>`元素来创建表格。以下是创建一个基础表格的步骤和一些关键属性:
```html
<table>
<!-- 表头部分 -->
<thead>
<tr>
<th>列1标题</th>
<th>列2标题</th>
<!-- 添加更多的表头单元格 -->
</tr>
</thead>
<!-- 数据行部分 -->
<tbody>
<!-- 每一行数据 -->
<tr>
<td>行1数据1</td>
<td>行1数据2</td>
</tr>
<tr>
<td>行2数据1</td>
<td>行2数据2</td>
</tr>
</tbody>
<!-- 可选:表尾总结信息 -->
<tfoot>
<tr>
<td>总计</td>
<td>总计数值</td>
</tr>
</tfoot>
</table>
<!-- 表格样式可以通过CSS控制 -->
<style>
table {
width: 100%; /* 宽度自适应 */
border-collapse: collapse; /* 合并边框 */
border: 1px solid black; /* 边框样式 */
}
th, td {
text-align: left; /* 列对齐方式 */
padding: 8px; /* 单元格内填充 */
border: 1px solid black; /* 单元格边框 */
}
</style>
```
在这个例子中,`<th>`用于表头单元格,`<td>`用于数据单元格,`<tr>`表示表格的一行,而`<tbody>`包含了所有数据行。
阅读全文