HTML表格

2023-10-27 50

一、HTML表格结构

HTML表格由<table>标签来定义。每个表格都有若干行，每行被分割为若干单元格，由<tr>标签定义。字母td指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML表格的基本结构如下：

<table>...</table>：定义表格
<th>...</th>：定义表格的标题栏（文字加粗）
<tr>...</tr>：定义表格的行
<td>...</td>：定义表格的列

绘制表格时，我们必须用<table>开始标记。在这个标记中，我们使用表格行来构造表格，<tr>和细胞，<td>.

二、简单表格

HTML简单表格的示例如下:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Colunm 2 </td>
<td>Row 1 - Column 3 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>

上述代码将生成两行有三个单元格的的表格。

二、复杂表格

代码示例：

<table>
<caption>A complex table</caption>
<thead>
<tr>
<th colspan="3">Invoice #123456789</th>
<th>14 January 2025
</tr>
<tr>
<td colspan="2">
<strong>Pay to:</strong><br>
Acme Billing Co.<br>
123 Main St.<br>
Cityville, NA 12345
</td>
<td colspan="2">
<strong>Customer:</strong><br>
John Smith<br>
321 Willow Way<br>
Southeast Northwestershire, MA 54321
</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name / Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Subtotal</th>
<td> 110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td> 8% </td>
<td>8.80</td>
</tr>
<tr>
<th colspan="3">Grand Total</th>
<td>$ 118.80</td>
</tr>
</tfoot>
</table>

以上代码是一个HTML表格，用于展示一个复杂的发票信息。以下是对代码内使用的标签解释：