HTML表格标签详解

最新推荐文章于 2024-04-19 10:19:00 发布
最新推荐文章于 2024-04-19 10:19:00 发布
阅读量8.9k 收藏 73
点赞数 9
分类专栏： html 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40018576/article/details/123757856
版权

【本文简介】：

        本文对HTML表格标签进行详解，大体分为三部分：

        第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；

        第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；

        第三部分，通过HTML样例代码和运行结果进行展示。

【标签说明】：

  • <table>：表示表格标签；
  • <tr>：表示表格行标签；
  • <td>：表示表格列标签，意即表格的单元格，用来存放表格数据；
  • <th>：表示表头标签；
  • <caption>：表示表格标题；
  • <colgroup>：表示表格列所属的组；
  • <col>：表示表格列的属性；
  • <thead>：表示表格的页眉；
  • <tfoot>：表示表格的页脚；
  • <tbody>：表示表格的主体；

【属性说明】：

  • border：表示表格的边框宽度，单位是像素，即px；
  • rowspan：表示多行合并，可以指定具体要合并的行数；
  • colspan：表示多列合并，可以指定具体要合并的列数；
  • cellpadding：表示单元格边缘与其单元格内容之间的空白间距；
  • cellspacing：表示单元格之间的空白间距；
  • width：表示表格的宽度；
  • summary：表示表格的摘要。

【样例展示】：

【样例展示1】：最基本的表格

代码如下：

<html>
<body>
<table>
  <tr>
    <th>列名1</th>
    <th>列名2</th>
  </tr>
  <tr>
    <td>第1行第1列</td>
    <td>第1行第2列</td>
  </tr>
  <tr>
    <td>第2行第1列</td>
    <td>第2行第2列</td>
  </tr>
</table>
</body>
</html>

运行结果：

【样例展示2】：带有边框的表格

 <html>
<body>
<table border="10">
    <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
    </tr>
</table>
</body>
</html>

运行结果：

【样例展示3】：带有标题的表格

 <html>
<body>
<table>
     <caption>HTML表格样例展示</caption>
    <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
    </tr>
</table>
</body>
</html>

运行结果：

 

【样例展示4】：跨行跨列的表格

 <html>
<body>
<table border="5">
<tr>
  <th>列名1</th>
  <th colspan="2">列名2</th>
</tr>
<tr>
  <td>第1行第1列</td>
  <td>第1行第2列</td>
  <td>第1行第3列</td>
</tr>
<tr>
  <td rowspan="2">第2行第1列</th>
  <td colspan="2">第2行第2列</td>
</tr>
<tr>
  <td colspan="2">第3行第2列</td>
</tr>
</table>
</body>
</html>

运行结果：

【样例展示5】：表格里面嵌套表格

 <html>
<body>
<table border="5">
<tr>
  <td>第1行第1列</td>
  <td>第1行第2列</td>
  <td>第1行第3列包含另一个表格:
   <table border="5">
   <tr>
     <td>第1行第1列</td>
     <td>第1行第2列</td>
   </tr>
   <tr>
     <td>第2行第1列</td>
     <td>第2行第2列</td>
   </tr>
   </table>
  </td>
</tr>
</table>
</body>
</html>

运行结果：

【样例展示6】：有单元格边距的表格

 <html>
<body>
<table border="10" 
cellpadding="20">
<tr>
  <td>第1行第1列</td>
  <td>第1行第2列</td>
</tr>   
<tr>
  <td>第2行第1列</td>
  <td>第2行第2列</td>
</tr>
</table>
</body>
</html>

运行结果：

【样例展示7】：有单元格间距的表格

 <html>
<body>
<table border="10" cellspacing="20">
<tr>
  <td>第1行第1列</td>
  <td>第1行第2列</td>
</tr>
<tr>
  <td>第2行第1列</td>
  <td>第2行第2列</td>
</tr>
</table>
</body>
</html>

运行结果：

 【样例展示8】：设置宽度的表格

<html>
<body>
<table border="10" cellspacing="20"  width="500">
<tr>
  <td>第1行第1列</td>
  <td>第1行第2列</td>
</tr>
<tr>
  <td>第2行第1列</td>
  <td>第2行第2列</td>
</tr>
</table>
</body>
</html>

运行结果：

  【样例展示9】：设置摘要的表格，摘要并不会显示。

<html>
<body>
<table border="10" cellspacing="20" summary="HTML样例摘要展示">
<tr>
  <td>第1行第1列</td>
  <td>第1行第2列</td>
</tr>
<tr>
  <td>第2行第1列</td>
  <td>第2行第2列</td>
</tr>
</table>
</body>
</html>

运行结果：

  【样例展示10】：设置页眉、主体、页脚的表格。

<html>
<body>
<table border="5">
  <tfoot>
    <tr>
      <td>页脚第1行第1列</td>
      <td>页脚第1行第2列</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>主体第1行第1列</td>
      <td>主体第1行第2列</td>
    </tr>
    <tr>
      <td>主体第2行第1列</td>
      <td>主体第2行第2列</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>页眉第1行第1列</th>
      <th>页眉第1行第2列</th>
    </tr>
  </thead>
</table>
</body>
</html>

 运行结果：

   【样例展示11】：设置列样式的表格。

<html>
<body>
<table border="10">
  <colgroup>
    <col span="1" style="background-color:orange">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>列名1</th>
    <th>列名2</th>
    <th>列名3</th>
  </tr>
  <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>
</table>
</body>
</html>

 运行结果：

 

实泽有之，无泽虚之
关注
  • 9
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【无标题】表格标签table,tr,td
xuekatie的博客
12-16 1439
表格标签table, tr, td <body> <!-- table是表格的意思 border是为了让它的边界能被看到1就是1像素 --> <table border="1" width="500"> <caption>我是表格的标题，通常写在tr上面</caption> <!-- table row表格行 --> <tr> &lt.
HTML表格标签
m0_57898822的博客
04-04 2832
html表格标签及属性
html表格标签
weixin_44992737的博客
06-06 5279
html表格标签详解
html标签之表格标签
最新发布
2401_84092423的博客
04-19 702
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
html标签之表格标签，前端应用性能优化，【建议收藏】
m0_57472099的博客
03-19 1018
7）border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框；
7.表格标签
potato123232的博客
03-11 3535
表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td,th,thead和tbody,我们先看前面三个 目录 1基本用法 2表格属性 3表格结构标签 4合并单元格 4.1跨行合并(竖着) rowspan 4.2跨列合并(横着) colspan 1基本用法 table是整个的大表格，tr是一行，td是一行中的一个 我们先简单写个例子 td可以创建后不写内容，再创建时会把前面的格子空过去 这个就是我们一个简单的表格 ...
详解HTML表格|l-639642.pdf
11-20
HTML表格由`<table>`标签开始，用于定义表格整体。在`<table>`内部，通常包括`<tr>`（表格行）、`<td>`（表格数据单元格）和`<th>`（表格头单元格）。`<tr>`标签用于创建表格的每一行，而`<td>`和`<th>`则分别定义...
HTML表格布局实际使用详解
09-28
HTML表格布局是网页设计中的一种基础元素，尤其适用于数据展示和表单输入。虽然现代网页设计倾向于使用CSS布局，但在特定场景下，表格仍然具有其不可替代的优势。本篇文章将深入探讨HTML表格的实际使用和布局计算。 ...
Lesson02_01 表格标签
10-31
HTML表格标签详解 HTML表格标签是HTML语言中的一种基本标签，用于创建表格结构，使得网页内容更加有序和美观。下面是HTML表格标签的详细解释： 1. `<table></table>`：表格标签 `<table>`标签是HTML表格的根...
html body标签详解与html常用的控制标记
09-28
一、`<body>`标签详解： `<body>`标签用于定义HTML文档的主体内容。它有以下几个常用属性： 1. `bgcolor`: 设置整个网页的背景颜色，可以是颜色名称或十六进制颜色代码。 2. `text`: 设置网页中文字的基本颜色。 3....
基本表格标签
m0_61417029的博客
07-08 2575
表格基本标签
表格标签table
IT之一小佬的博客
04-18 1533
表格标签 1. 表格的结构 表格是由行和列组成，好比一个excel文件 2. 表格标签 <table>标签：表示一个表格 <tr>标签：表示表格中的一行 <td>标签：表示表格中的列 <th>标签：表示表格中的表头 示例代码: <table> <tr> <th>姓名</th> <th>年龄</th>
HTML5(七)表格-table标签、tr标签、td标签
阳光小西的专栏
07-23 4758
table标签用于定义一个表格，在网页当中加入一个table标签就相当于定义了一个表格。td和tr标签是table的子标签，分别用于定义行和列<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"></meter> </head> <body> <table border="2"> <tr>
HTML 表单标签
weixin_45904557的博客
02-28 8029
一、什么是表单标签 表单是用来采集用户的输入数据，然后将数据提交给服务器 二、表单的组成 一个表单有三个基本组成部分： ①表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 ②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 ③表单按钮：包括提交按钮、复位按钮和一般按钮； 三、表单标签 表单标签＜form＞＜/form＞ 功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据
HTML基础——表格标签
Ariel_欢
01-10 9566
在过去表格标签用的非常多，绝大多数的网站都是表格标签来制作的，也就是说表格标签是一个时代的代表。 1.什么是表格标签？ 表格标签的作用：用来给一堆数据添加表格语义。 其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。 2.表格标签的格式： <table> <tr> <td>需要显示的内容</td> </tr>...
HTML基础————table标签
憨憨的博客
05-07 1万+
html——table
HTML表格（table、tr、td、th、thead、tbody、tfoot标签）
热门推荐
拾Miss~博客
03-12 3万+
目录 HTML表格 table表格属性 ***HTML表格** <!DOCTYPE html> <html> <head> <title>表格</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </hea...
表格其他属性(选学)+合并单元格
407指导员
10-11 926
th标签 专门存储第一列标题的标签，自动居中且加粗。 表格的结构(了解就好) 由于表格存储数据比较复杂，为了方便管理和阅读以及提升语义，我们对表格中存储的数据进行了分类 如果我们指定了thead和tfoot,那么在需改整个表格高度时，thead和tfoot有自己默认高度，不会随着表格高度变化而变化。 1.表格的标题 <caption><h2>9月7日到13日运动运动排行榜</h2> caption标签 caption 标签必须紧随 table 标签之后，否则无效。只能对
Html标签中thead、tbody、tfoot的作用
weixin_30604651的博客
05-27 329
Html标签中thead、tbody、tfoot的作用 为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。 如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。 tbody、tfoot、thead一般来说用得不是...
2022年HTML表格标签详解及实例
2022年HTML相关知识点表格标签讲解深入...2022年的HTML相关知识点表格标签讲解强调了HTML表格的结构、样式定制和布局控制，对于Web开发者来说，熟练运用这些标签和属性能够有效地构建出美观且功能丰富的数据展示页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值