HTML表格

一、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表格,用于展示一个复杂的发票信息。以下是对代码内使用的标签解释:

  • <table>标签定义了一个表格;
  • <caption>标签为表格添加了标题,即"A complex table";
  • <thead>标签包含了表格的表头部分
  • <tr>标签定义了一个表格行;
  • <th>标签定义了一个表头单元格,用于显示列标题;
  • colspan属性表示该单元格跨越多少列;
  • <td>标签定义了一个表格数据单元格,用于显示具体的数据内容
  • <strong>标签用于加粗文本;
  • <br>标签用于换行;
  • <tbody>标签包含了表格的主体部分
  • <tfoot>标签包含了表格的页脚部分;
  • 在<tfoot>标签中,<tr>标签定义了一个表格行,用于显示总计信息。

以上代码将会输出:

HTML表格

广告合作
QQ群号:707632017

温馨提示:

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com。(#改为@)

2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。

目录