html标签（表格标签）-小白学习中

最新推荐文章于 2025-06-08 17:13:28 发布

小白学习中–.–

最新推荐文章于 2025-06-08 17:13:28 发布

阅读量742

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html

本文链接：https://blog.youkuaiyun.com/mryer/article/details/108059092

前端专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了HTML5中用于创建表格的主要标签和属性，包括如何使用表格框架、表头单元格以及如何实现单元格的跨行和跨列合并。通过实例展示了rowspan和colspan属性在表格布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html-5

13.表格标签
表格标签主要是为了显示数据。
13.1 主要的框架

    <table>
        <tr>
            <td>单元格内的文字</td>
        </tr>
    </table>
(1)<table></table>是用于定义表格的标签
(2)<tr></tr>标签用于定义表格中的行，必须在<table></table>中。
(3)<tb></tb>标签用于定义表格中的单元格，必须在<tr></tr>中。

13.2 表头单元格标签

<th></th>加黑居中

例如

	<table>
		<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
		<tr><td>蒙多</td> <td>无</td> <td>456</td></tr>
		<tr><td>提莫</td> <td>男</td> <td>23</td></tr>
		<tr><td>大树</td> <td>无</td> <td>4698</td></tr>
		<tr><td>德玛西亚之力</td> <td>男</td> <td>25</td></tr>
	</table>

结果如下：

姓名	性别	年龄
蒙多	无	456
提莫	男	23
大树	无	4698
德玛西亚之力	男	25

13.3 表格属性（主要用CSS设置）

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对其方式。
border	1或""	规定表格多元是否拥有边框，默认为""，表示没有边框。
callpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度。

13.4 表格结构标签

<thead></thead>标签表示表格的头部。
<tbody></tbody>标签标示表格的主题区域。

13.5 合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
这两个都是td的属性。
例如

<table align="center" border="" cellpadding="2" cellspacing="0" width="600">
		<thead>
		<tr>
			<th>排名</th><th>书名</th><th>字数（万）</th><th>月票</th><th>推荐票（万）</th><th>相关链接</th>
		</tr>
		</thead>
		<tbody></tbody>
		<tr>
			<td>1</td><td>我师兄实在太稳健了</td><td>151</td><td>50000</td><td>251</td><td><a href="https://tieba.baidu.com/f?kw=%E6%88%91%E5%B8%88%E5%85%84%E5%AE%9E%E5%9C%A8%E5%A4%AA%E7%A8%B3%E5%81%A5%E4%BA%86&traceid=" target="_blank">贴吧</a> <a href="../图片/08-1.jpg" target="_blank">图片</a> <a href="https://baike.sogou.com/v184248122.htm?fromTitle=%E6%88%91%E5%B8%88%E5%85%84%E5%AE%9E%E5%9C%A8%E5%A4%AA%E7%A8%B3%E5%81%A5%E4%BA%86" target="_blank">百科</a></td>
		</tr>
		<tr>
			<td>2</td><td>超神制卡师</td><td>285</td><td>2318</td><td>121</td><td><a href="https://tieba.baidu.com/f?kw=%E8%B6%85%E7%A5%9E%E5%88%B6%E5%8D%A1%E5%B8%88" target="_blank">贴吧</a> <a href="../图片/08-2.jpg" target="_blank">图片</a> <a href="https://baike.sogou.com/v176515812.htm?fromTitle=%E8%B6%85%E7%A5%9E%E5%88%B6%E5%8D%A1%E5%B8%88" target="_blank">百科</a></td>
		</tr>
		<tr>
			<td>3</td><td>明朝败家子</td><td>542</td><td>906</td><td>420</td><td><a href="https://tieba.baidu.com/f?kw=%C3%F7%B3%AF%B0%DC%BC%D2%D7%D3" target="_blank">贴吧</a> <a href="../图片/08-3.jpg" target="_blank">图片</a> <a href="https://baike.sogou.com/v178223083.htm?fromTitle=%E6%98%8E%E6%9C%9D%E8%B4%A5%E5%AE%B6%E5%AD%90" target="_blank">百科</a></td>
		</tr>
		<tr>
			<td>4</td><td>西游之大娱乐家</td><td>234</td><td>50</td><td>29</td><td><a href="https://tieba.baidu.com/f?kw=%ce%f7%d3%ce%d6%ae%b4%f3%d3%e9%c0%d6%bc%d2" target="_blank">贴吧</a> <a href="../图片/08-4.jpg" target="_blank">图片</a> <a href="http://book.qq.com/intro.html?bid=AGoENl1jVjMAOlRiATkBbQ" target="_blank">百科</a></td>
		</tr>
		<tr>
			<td>5</td><td>饲养全人类</td><td>241</td><td>4887</td><td>64</td><td><a href="https://tieba.baidu.com/f?kw=%CB%C7%D1%F8%C8%AB%C8%CB%C0%E0" target="_blank">贴吧</a> <a href="../图片/08-5.jpg" target="_blank">图片</a> <a href="https://baike.sogou.com/v185395486.htm?fromTitle=%E9%A5%B2%E5%85%BB%E5%85%A8%E4%BA%BA%E7%B1%BB" target="_blank">百科</a></td>
		</tr>
		<tr>
			<td colspan="5">lll</td>
		</tr>
		</tbody>
	</table>

结果如下：

排名	书名	字数（万）	月票	推荐票（万）	相关链接
1	我师兄实在太稳健了	151	50000	251	贴吧图片百科
2	超神制卡师	285	2318	121	贴吧图片百科
3	明朝败家子	542	906	420	贴吧图片百科
4	西游之大娱乐家	234	50	29	贴吧图片百科
5	饲养全人类	241	4887	64	贴吧图片百科
lll

注：正在跟随bilibili上的pink老师学习，欢迎大家一起来学习。