如何在HTML中显示表格
表格的基本结构
在HTML中,表格是使用
- <table>:定义一个表格。
- <tr>:定义表格中的一行。
- <th>:定义表格的标题单元格,通常用来表示列的名称。
- <td>:定义表格中的普通单元格,用来填写数据。
一个简单的表格代码示下:
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>小红</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
表格的样式及属性
除了基本的结构,HTML表格还可以通过CSS样式来美化。常用的样式包括设置边框、单元格的填充、对齐方式等。这些样式可以通过内联样式或者外部样式表来实现。:
<table style="border-collapse: collapse;">
<tr>
<th style="padding: 10px; text-align: left;">姓名</th>
<th style="padding: 10px; text-align: left;">年龄</th>
<th style="padding: 10px; text-align: left;">城市</th>
</tr>
</table>
表格的应用实例
表格在网页中显示数据非常有效,特别适合用于展示用户信息、产品目录、统计数据等。以下是一个关于产品列表的表格示例:
<table border="1">
<tr>
<th>产品名称</th>
<th>价格</th>
<th>库存</th>
</tr>
<tr>
<td>产品A</td>
<td>100元</td>
<td>50</td>
</tr>
<tr>
<td>产品B</td>
<td>200元</td>
<td>30</td>
</tr>
</table>