HTML <table> 标签

定义和用法

<table> 标签可定义表格。在 <table> 标签内部,你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD,table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性描述DTD
align
  • left
  • center
  • right
排列表格。不赞成使用。请使用样式取而代之。TF
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname
规定表格的背景颜色。不赞成使用。请使用样式取而代之。TF
borderpixels

规定表格边框的宽度。

提示:可通过设置 border="0" 来显示无边框的表格!

STF
cellpadding
  • pixels
  • %
规定单元边沿与其内容之间的空白。STF
cellspacing
  • pixels
  • %
规定单元格之间的空白。STF
frame
  • void
  • above
  • below
  • hsides
  • lhs
  • rhs
  • vsides
  • box
  • border

规定表格周围的哪一侧的边框是可见的。

注释:"border" 属性可与 "frame" 属性配合使用,来规定边框的宽度!

STF
rules
  • none
  • groups
  • rows
  • cols
  • all

规定水平或垂直的分界线。

注释:必须与 "border" 属性配合使用!

STF
summarytext为语音合成/非视觉浏览器规定表格的摘要。STF
width
  • %
  • pixels
规定表格的宽度。STF

标准属性

id, class, title, style, dir, lang, xml:lang

如需完整的描述,请访问标准属性

事件属性

onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

如需完整的描述,请访问事件属性

TIY 实例

表格
这个例子演示如何在 HTML 文档中创建表格。
表格边框
本例演示各种类型的表格边框。
没有边框的表格
本例演示一个没有边框的表格。
表格中的标题(Headings)
本例演示如何显示表格标题。
空单元格
本例展示如何使用 "&nbsp;" 处理没有内容的单元格。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何显示在不同的元素内显示元素。
单元格填充(Cell padding)
本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本例演示如何使用单元格间距增加单元格之间的距离。
向表格添加背景颜色或背景图像
本例演示如何向表格添加背景
向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景
在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
<think>好的,用户想了解如何使用HTML中的<table>标签创建表格。首先,我需要回忆HTML表格的基本结构,包括tabletr、td、th这些标签的用法。记得table标签定义整个表格,tr是行,td是单元格,th是表头单元格。然后,可能需要提到常用的属性,比如border、cellspacing、cellpadding,还有合并单元格的rowspan和colspan。 接下来,用户提供的参考引用里有提到一些属性,比如border="4"、cellspacing="20px"、align="center"等,这些需要整合到回答中。同时,引用[2]提到了rowspan和colspan的使用方法,需要举例说明如何跨行或跨列合并单元格,并注意后续行减少对应的td数量。 还要注意用户提到的系统级指令,比如行内公式用$...$,独立公式用$$...$$,不过这个问题可能不涉及数学公式,但需要检查是否有遗漏。另外,生成相关问题,可能需要围绕表格标签的其他用法、属性或实际应用展开。 需要确保回答结构清晰,分步骤说明创建表格的过程,并给出代码示例。可能还要提到现代HTML5中推荐使用CSS代替某些属性,如align、bgcolor,但为了用户理解,还是先介绍传统属性,再提CSS的方法。 最后,检查是否有引用标识,在提到参考的地方加上[^1]和[^2]。确保语言口语化,避免使用专业术语过多,让用户容易理解。</think>### 如何使用HTML中的`<table>`标签创建表格? #### 1. **基本结构** HTML表格由`<table>`标签定义,包含以下核心标签: - **`<tr>`**:定义表格的行(Table Row) - **`<td>`**:定义单元格内容(Table Data) - **`<th>`**:定义表头单元格(Table Header),默认加粗居中 示例: ```html <table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> </table> ``` #### 2. **常用属性** - **`border`**:设置边框宽度,如`border="1"` - **`cellspacing`**:单元格间距,如`cellspacing="5px"` - **`cellpadding`**:单元格内边距,如`cellpadding="10px"` - **`width`/`height`**:表格宽高,如`width="500px"` - **`bgcolor`**:背景颜色,如`bgcolor="#eee"`(HTML5中建议用CSS替代) #### 3. **合并单元格** - **`rowspan`**:跨行合并,如`<td rowspan="2">合并两行</td>` - **`colspan`**:跨列合并,如`<td colspan="2">合并两列</td>` 示例(课程表): ```html <table border="1" cellspacing="0" width="400px"> <tr> <th rowspan="2">时间</th> <th colspan="5">星期一至五</th> </tr> <tr> <td>语文</td> <td>数学</td> <!-- 共5列,已合并 --> </tr> </table> ``` 注意:合并后需减少后续行的单元格数量。 #### 4. **完整示例** ```html <table border="2" cellspacing="10px" align="center" width="600px"> <tr bgcolor="#f0f0f0"> <th>产品</th> <th>价格</th> <th>库存</th> </tr> <tr> <td>笔记本</td> <td>¥4999</td> <td rowspan="2">100件</td> </tr> <tr> <td>鼠标</td> <td>¥199</td> </tr> </table> ``` #### 5. **现代实践建议** - 使用CSS替代`align`、`bgcolor`等属性(更符合HTML5标准) - 结合`<thead>`、`<tbody>`、`<tfoot>`增强语义化
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值