“HTML表格”的版本间差异
本页内容
(创建页面,内容为“22 HTML 表格允许 Web 开发人员将数据排列成行和列。 <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td>…”) |
无编辑摘要 标签:手工回退 |
||
(未显示同一用户的3个中间版本) | |||
第1行: | 第1行: | ||
[[Category:HTML教程|22]] | [[Category:HTML教程|22]] | ||
HTML 表格允许 Web 开发人员将数据排列成行和列。 | HTML 表格允许 Web 开发人员将数据排列成行和列。 | ||
<html> | |||
<table class="table"> | <table class="table"> | ||
<thead> | <thead> | ||
第32行: | 第31行: | ||
</tbody> | </tbody> | ||
</table> | </table> | ||
</html> | |||
== 定义 HTML 表格 == | == 定义 HTML 表格 == | ||
HTML 中的表格由行和列内的表格单元格组成 | HTML 中的表格由行和列内的表格单元格组成 | ||
<sample title="" hererun="s" desc="一个简单的 HTML 表格:" > | <sample title="" hererun="s" desc="一个简单的 HTML 表格:" > | ||
<table> | <table> | ||
<tr> | |||
<th>姓名</th> | |||
<th>年龄</th> | |||
<th>性别</th> | |||
</tr> | |||
<tr> | |||
<td>小白</td> | |||
<td>11</td> | |||
<td>男</td> | |||
</tr> | |||
<tr> | |||
<td>教程</td> | |||
<td>22</td> | |||
<td>女</td> | |||
</tr> | |||
</table> | |||
</sample> | </sample> | ||
== 单位表格 == | == 单位表格 == | ||
第48行: | 第61行: | ||
<sample title="" hererun="s" desc="" > | <sample title="" hererun="s" desc="" > | ||
<table> | <table> | ||
<tr> | |||
<td>Emil</td> | |||
<td>Tobias</td> | |||
<td>Linus</td> | |||
</tr> | |||
</table> | |||
</sample> | </sample> | ||
<blockquote> | |||
注意:表格数据元素是表格的数据容器。 | 注意:表格数据元素是表格的数据容器。 | ||
可以包含各种 HTML 元素;文本、图像、列表、其他表格等。 | |||
</blockquote> | |||
== 表行 == | == 表行 == | ||
每个表格行都以 a 开头, 以标签''' <nowiki><tr></nowiki> '''结尾。''' <nowiki></tr></nowiki> ''' | 每个表格行都以 a 开头, 以标签''' <nowiki><tr></nowiki> '''结尾。''' <nowiki></tr></nowiki> ''' | ||
第59行: | 第82行: | ||
<sample title="" hererun="s" desc="" > | <sample title="" hererun="s" desc="" > | ||
<table> | <table> | ||
<tr> | |||
<td>Emil</td> | |||
<td>Tobias</td> | |||
<td>Linus</td> | |||
</tr> | |||
<tr> | |||
<td>16</td> | |||
<td>14</td> | |||
<td>10</td> | |||
</tr> | |||
</table> | |||
</sample> | </sample> | ||
您可以在表格中包含任意数量的行,只需确保每行中的单元格数相同。 | 您可以在表格中包含任意数量的行,只需确保每行中的单元格数相同。 | ||
第69行: | 第103行: | ||
<sample title="" hererun="s" desc="让第一行成为表格标题:" > | <sample title="" hererun="s" desc="让第一行成为表格标题:" > | ||
<table> | <table> | ||
<tr> | |||
<th>Person 1</th> | |||
<th>Person 2</th> | |||
<th>Person 3</th> | |||
</tr> | |||
<tr> | |||
<td>Emil</td> | |||
<td>Tobias</td> | |||
<td>Linus</td> | |||
</tr> | |||
<tr> | |||
<td>16</td> | |||
<td>14</td> | |||
<td>10</td> | |||
</tr> | |||
</table> | |||
</sample> | </sample> | ||
默认情况下,''' <nowiki><th></nowiki> '''元素中的文本是粗体且居中的,但您可以使用 CSS 进行更改。 | 默认情况下,''' <nowiki><th></nowiki> '''元素中的文本是粗体且居中的,但您可以使用 CSS 进行更改。 |
2022年8月4日 (四) 22:05的最新版本
HTML 表格允许 Web 开发人员将数据排列成行和列。
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
定义 HTML 表格
HTML 中的表格由行和列内的表格单元格组成
示例
一个简单的 HTML 表格:
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小白</td>
<td>11</td>
<td>男</td>
</tr>
<tr>
<td>教程</td>
<td>22</td>
<td>女</td>
</tr>
</table>
单位表格
每个表格单元格由一个 <td> 和一个 </td> 标签定义。
td 代表表格数据。
<td> 和之间 </td> 的所有内容都是表格单元格的内容。
示例
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
注意:表格数据元素是表格的数据容器。 可以包含各种 HTML 元素;文本、图像、列表、其他表格等。
表行
每个表格行都以 a 开头, 以标签 <tr> 结尾。 </tr>
tr 代表表格行。
示例
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
您可以在表格中包含任意数量的行,只需确保每行中的单元格数相同。
注意:有时一行中的单元格可能少于或多于另一行。您将在后面的章节中了解这一点。
表头
有时您希望您的单元格成为标题,在这些情况下使用 <th> 标签而不是 <td> 标签:
示例
让第一行成为表格标题:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
默认情况下, <th> 元素中的文本是粗体且居中的,但您可以使用 CSS 进行更改。