html学习——表格标签

最新推荐文章于 2025-11-26 10:20:12 发布

原创最新推荐文章于 2025-11-26 10:20:12 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

新手学习同时被 2 个专栏收录

20 篇文章

订阅专栏

html学习

17 篇文章

订阅专栏

本文介绍了HTML表格的基本结构，包括如何创建三行三列的表格，并展示了如何使用`<td>`的`colspan`和`rowspan`属性实现单元格的跨行和跨列。示例中详细解释了跨行单元格`第一单元`和跨列单元格`第一章节`的实现方法。

表格

1-1	1-2	1-3
2-1	2-2	2-3
3-1	3-2	3-3

<!--表格标签table
	行标签tr
	列标签td
	边框标签border，可以编辑边框宽度
	-->
<table border="1px">
	<tr>
		<td>1-1</td>
		<td>1-2</td>
		<td>1-3</td>
	</tr>
		<tr>
		<td>2-1</td>
		<td>2-2</td>
		<td>2-3</td>
	</tr>
		<tr>
		<td>3-1</td>
		<td>3-2</td>
		<td>3-3</td>
	</tr>
</table>
<!--三行三列的表格-->

跨行、跨列

第一单元
第一章节	第一小节
	第二小节

（上为显示效果，下为代码）

<!--一个简单的三行两列表格-->
<table>
<tr>
	<td colspan="2">第一单元</td>
</tr>
<tr>
<td rowspan="2">第一章节</td>
<tr>第一小节</tr>
</tr>
<tr>
<td>第二小节</td>
</tr>
</table>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

greedyguttler

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML——表格 ※

Junds0的博客

12-28

1579

这里介绍一个控制表格内文本方向的属性。本来表格有自带的属性align，也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性text-align来代替。不知你们有没有发现，表格的内容都是靠左的，在表格宽度比较大的情况下，是很明显的。在Begin-End区域创建你的第一个表格，它的边框宽度为5px，要求内容和效果图展示的一样。这关是对大家前面所学知识的一个总结和拓展，通过前面的学习，做一个表格是没有问题的。第二关虽然设置了宽、高，可是内容是紧挨着边框的，怎么使表格的内容和边框有间距呢？

HTML——表格标签

wshwsh_的博客

07-13

1612

表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

water___Wang 2021.04.26
不错，挺好的，加油~

HTML学习笔记——05：表格

qq_31532983的博客

01-15

9669

HTML-表格

总结html标签——table表格

为你而战的博客

06-08

3980

本文全面介绍了HTML中table标签的使用方法，从基础结构到高级应用。主要内容包括：表格的基本组成元素（thead、tbody、tr、td等）、单元格合并技巧（colspan和rowspan），以及通过CSS设置边框、悬停效果和斑马条纹等样式。文章还讲解了响应式表格的实现方法和JavaScript动态操作表格的技巧，并对比了DataTables、Handsontable等常用表格库的优缺点。通过合理运用这些技术，开发者可以创建功能丰富、美观实用的数据表格。

HTML——表格专项与综合

学习只是用户态

10-21

2349

这里介绍一个控制表格内文本方向的属性，本来表格有自带的属性align也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性text-align来代替。这里先创建一个两行两列的表格。请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表格的创建任务。请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表格的创建任务。本关任务：创建一个表格，设置它的宽为100%，高为200px，边框为1px，内容和效果图展示的一样。

前端学习——HTML的表格相关

2301_80391855的博客

09-04

294

表格由行、列、单元格组成。

HTML——表格标签＜table＞与表格实现

qq_51869518的博客

06-25

5705

表格标签的实际应用和表格属性colspan和rowspan的详细解释与使用的实例和规则，以及不同形式的表格的实现；课程表、日历和的代码实现。欢迎大家能有更好的建议。

CSS学习笔记8——表格

2401_88591507的博客

04-24

1375

CSS学习笔记8——表格

HTML——表格 ※学习【头歌educoder】

热门推荐

greedyguttler的博客

02-23

1万+

多选框与按钮上为演示效果下为代码 <form method="get" action="result.html">  <p>用户名：<input type="text" name="username" value="文本框初始值" maxlengt

html学习——列表框、文本域、文件域

greedyguttler的博客

02-23

2381

下拉框、文本域、文件域上为演示效果下为代码 <form method="get" action="result.html">  <p>用户名：<input type="text" name="username" value="文本框初始值" max

html学习——表单的提交post、get

greedyguttler的博客

02-22

1580

表单 form：表单标签 method：表单提交的方式，post/get。 action：表单数据提交的位置，可以是网页，也可以是一个请求地址 <form method="post" action="result.html"> </form>  <form method="get" action="result.html"> </fo

html学习——表单元素格式、单选框

greedyguttler的博客

02-22

1270

表单元素格式属性说明 type 指定元素的类型，文本框text，密码框password，多选框checkbox，单选框radio，提交按钮submit，重置按钮reset，文件框file，隐藏hidden，图片框image，按钮button name 指定表单元素的名称 value 元素的初始值，type为单选框radio时必须指定一个值 size 指定表单元素的初始宽度，当type为text或者password时，表单元素的大小以字符为单位，对其他的类型，宽度以

html学习——隐藏、只读、禁用、增强鼠标可用性

greedyguttler的博客

02-23

481

表单的应用隐藏域：hidden，将内容隐藏，若内容有初始值，仍然可以提交只读：readonly，只能看无法输入禁用：disabled，可以禁止某些按钮（与只读的区别） <form> <p> <input type="text" name="username" placeholder="请输入用户名" hidden> <input type="text" name="username" placeholder="请输入用户名" readonly&

html学习——超链接标签

greedyguttler的博客

02-21

441

超链接标签 a标签 <a herf="要跳转的链接">点击我跳转到页面</a> 示例 <a herf="http://www.baidu.com">点击我跳转到百度</a> <a herf="https://editor.youkuaiyun.com/md/?articleId=113860012">点击我跳转到我的第一篇博客</a> <a herf="http://www.kafuchino.vip">点击我跳转到智乃导航<

HTML——表格

03-20

<think>好的，用户想了解HTML表格的使用方法。首先，我需要根据提供的引用内容整理出结构化的回答。引用里提到了基本结构、语义化标签以及美化方法。先检查用户的问题是否覆盖了这些方面。用户需要教程，所以应该从基础开始，逐步深入。基本结构包括table、tr、th、td这些标签，必须提到。然后语义化部分，如thead、tbody、tfoot和caption，这些对可访问性和SEO有帮助，需要强调。接下来是合并单元格，rowspan和colspan，用户可能在实际应用中会遇到需要合并的情况，所以这部分要详细说明。然后样式调整，比如边框、对齐方式，虽然引用提到了使用属性，但现在更推荐CSS，所以可能需要提醒用户使用CSS而不是HTML属性。引用中提到了border、align等属性，但根据最佳实践，应该建议使用CSS来美化表格，比如设置边框、背景色等。同时，响应式设计可能也是用户关心的，比如滚动处理，可以加入媒体查询或overflow的方法。还要注意示例代码的正确性，确保使用正确的标签嵌套。可能用户会忽略tbody，但显式写出更规范。另外，引用中的示例是否有误？比如，引用3提到在<style>中设置样式，但具体代码是否正确需要检查。最后，相关问题部分需要覆盖基本结构、语义化、合并单元格、样式优化以及响应式设计。确保问题能引导用户进一步学习。总结回答结构：基本结构→语义化标签→合并单元格→样式优化→示例代码→相关问题。需要确保每个部分都有引用支持，并在适当位置添加引用标记。</think>### HTML表格使用教程 HTML表格是展示结构化数据的核心工具，通过合理使用标签和样式可实现清晰的数据呈现。以下是详细的使用方法： --- #### 一、基本结构 HTML表格由以下标签构成： - **`<table>`**：定义表格容器 - **`<tr>`**：定义表格行 - **`<th>`**：定义表头单元格（默认加粗居中） - **`<td>`**：定义普通单元格示例代码： ```html <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> </table> ``` --- #### 二、语义化标签（提升可访问性）通过以下标签增强表格语义： 1. **`<caption>`**：表格标题，置于`<table>`内首行 2. **`<thead>`**：表头区域 3. **`<tbody>`**：表格主体 4. **`<tfoot>`**：表格页脚示例： ```html <table> <caption>员工信息表</caption> <thead> <tr><th>部门</th><th>人数</th></tr> </thead> <tbody> <tr><td>技术部</td><td>15</td></tr> </tbody> <tfoot> <tr><td>总计</td><td>15</td></tr> </tfoot> </table> ``` [^2] --- #### 三、合并单元格 1. **`colspan`**：横向合并单元格 ```html <td colspan="2">跨两列</td> ``` 2. **`rowspan`**：纵向合并单元格 ```html <td rowspan="3">跨三行</td> ``` --- #### 四、样式优化（推荐CSS）通过CSS实现美观效果： ```html <style> table { border-collapse: collapse; /* 合并边框 */ width: 100%; } th, td { border: 1px solid #ddd; /* 单元格边框 */ padding: 8px; text-align: center; } th { background-color: #f2f2f2; /* 表头背景色 */ } </style> ``` [^3] --- #### 五、响应式表格添加横向滚动条适应小屏幕： ```html <div style="overflow-x:auto;"> <table>...</table> </div> ``` [^4] ---