HTML基础-06-表格（表＜table＞ ，行 ＜tr＞，列 ＜tb＞，表头 ＜th＞，跨列colspan，跨行rowspan，单元格边距 cellpadding，单元格间距cellspacing）

已于 2022-11-18 23:42:42 修改
阅读量1.5k 收藏 9
点赞数 1
分类专栏： # HTML基础教程 文章标签： html 前端 表格 跨列colspan 跨行rowspan
于 2022-03-18 20:15:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123504005
版权
本文详细介绍了HTML中用于创建表格的相关元素和属性，包括<table>、<tr>、<th>、<td>、<caption>、colspan和rowspan等。通过示例展示了如何设置表格结构、表头、表名、跨列和跨行，以及单元格的边距和间距。此外，还提及了在单元格内嵌套其他HTML标签的可能性。
摘要由CSDN通过智能技术生成

文章目录

1. 表< table > ，行 < tr >，列 < tb >

  • 语法

每个 < table > 是一个表格 →
其中每个< tr > 是一列 →
其中每个 < tb > 是一格

  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事(runoob.com)</title> 
</head>
<body>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>刘备</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>刘备</td>
  <td>关羽</td>
  <td>张飞</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>刘备</td>
  <td>关羽</td>
  <td>张飞</td>
</tr>
<tr>
  <td>孙尚香</td>
  <td>曹月娥</td>
  <td>夏侯涓</td>
</tr>
</table>
  • 输出

在这里插入图片描述

2. 表头 < th >

  • 语法
<th>表头</th>
  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>姓</th>
  <th>名</th>
  <th>字</th>
</tr>
<tr>
  <td>关</td>
  <td>羽</td>
  <td>云长</td>
</tr>
</table>
  • 输出
    在这里插入图片描述

3. 表名 < caption >

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>

<caption>人员姓名字</caption>
<table border="1">
<tr>
  <th>姓</th>
  <th>名</th>
  <th>字</th>
</tr>
<tr>
  <td>关</td>
  <td>羽</td>
  <td>云长</td>
</tr>
</table>
</body>
</html>
  • 结果输出
    在这里插入图片描述

4. 跨列 colspan

  • 语法
 <th colspan="2">xxxxx</th>

在th里还是在td里都可以

  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>
<table border="1">
<tr>
  <th colspan="2">姓名</th>
  <th>字</th>
</tr>
<tr>
  <td>关</td>
  <td>羽</td>
  <td>云长</td>
</tr>
</table>
</body>
</html>
  • 输出
    在这里插入图片描述

5. 跨行 rowspan

  • 语法
<th  rowspan="2">xxxx</th>
  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>


<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th  rowspan="2">姓名</th>
  <td>关</td>
</tr>
<tr>
  <td>羽</td>
</tr>
<tr>
	<th>表字</th>
	<td>云长</td>
</tr>
</table>

</body>
</html>
  • 输出
    在这里插入图片描述

6. 单元格边距 cellpadding

  • 语法
cellpadding="50"
  • 示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>蜀</title>
</head>

<body>

  <h4>有单元格边距:</h4>
  <table border="1" cellpadding="50">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
  </table>

</body>

7. 单元格间距 cellspacing

  • 语法
 cellspacing="10"
  • 示例
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

8. 表内标签

  • 语法

直接嵌套就可以了

  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>
  • 输出

在这里插入图片描述

9. 一个示例

受理员业务统计表
2017-01-02---2017-05-02
受理员受理数自办数直接解答拟办意见返回修改工单类型
同意比例数量比例建议件诉求件咨询件
受理处关羽          
           
           
           
           
           
           
总计20202020202020202020
话务组关羽          
关羽          
关羽          
关羽          
           
           
           
总计20202020202020202020

玄德公笔记
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML中＜table＞的属性 1.外间距和2.内间距（详解） （表格属性）
努力努力再努力
03-06 7万+
外间距 北京 上海 深圳 广州
BootStrap-Table——没用过bootStrap，想用BootStrap-Table做个表格 BootStrap-Table搭建
梦若辰宇的博客
11-29 1625
一、思想 第一：为什么要用bootstrap-table来构建table？ 第二：bootstrap是前端框架，他的思路或者说优势（特点）是什么？ 第三：要以一种什么样的角度去实现用bootstrap-table来构建table？ 也就是说在用bootstrap-table来构建table的时候，我们必须要有想法，要对bootstrap的思路和实现有个简单的了解，这样，思维的角度和高度一致了...
【HTML】table标签--rowspan、colspan属性的使用
weixin_44044705的博客
06-18 1万+
table标签 相关标签介绍 <caption> — 表格的标题 <th> — 表格的行标题或列标题 <tr> — 表格的一行 <td> — 表格的一列 table标签的属性 summary — 摘要内容，不会显示在浏览器，该属性增加了表格的可读性，使搜索引擎更好的读懂表格内容 cellingpadding — 单元格与其内容间的距离 cellingspacing — 单元格间的距离 th、tr、td标签的属性 rowspa
HTML~学习笔记2——表格（跨行跨列）
最新发布
weixin_62120946的博客
07-18 235
简单记录一些学习笔记
HTML table跨行跨列
growdu的网络博客
06-28 1280
HTML table跨行跨列 table读取 读取时，表格行数与列数都已经确定，且每行单元格个数相同,每列单元格个数也相同。 跨行跨列时，相应的单元格就要多占行单元格的位置和列单元格的位置。 跨行 跨多少行，相应的该单元格就要多占据行数-1个单元格，每跨一行，该单元格下一行就减少一个单元格。跨行时下一行单元格数减少。 <table border="1"> <tr> &l...
【HTML】表格的跨行跨列
林伊的博客
12-08 4538
表格的跨行跨列 第一行第一列的单元格要跨两列，利用colspan属性来实现跨列 <tablealign="center"border="1"width="200"height="200"cellspacing="0"> <tr> <thcolspan="2">1.1</th> <td>1.3</td> </tr> <tr> <td>2.1</td>...
表格(table、tr、th、td、colspan、rowspan)
不动声色的小蜗牛的博客
07-13 1864
表格一： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{ width: 720px;/*设置表格水平宽度为720px*/ margin: 0 auto;/*使表格水平居中*/ border: 1px solid black;/*设置边框*/ border-spacing:
HTML实现表格rowspan、colspan操作
sout-lanys
05-11 7385
前言 今天领导安排个任务，将报告的某个功能界面动态化展示，其中有涉及到 Table 表格操作(rowspan、colspan)，刚刚开始对这两概念不是很理解，走了很多弯路…扯远了，开始吧。 一、概念 colspan（跨列） colspan：指的是我这数据占几列。 colspan案例 <table border="1"> <tr> <!-- Monthly Savings占两列 --> <th colspan="2">Monthly Sav
HTML表格
jcf52的博客
03-21 1600
实际生活中，我们经常使用到表格来统计数据和信息，这样可以更加清晰地显示数据或信息，表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。 表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。 一，表格的基本结构 1.标签 每个表格有三个必须的标签，<table>、<tr>和<td>三个标签，用来创建表格，语法结构如下： &lt
JS 实现Table相同行的单元格自动合并示例代码
10-26
一个HTML表格由多个`<table>`标签组成，表格中可以包含行（`<tr>`）和单元格（`<td>`或`<th>`）。`<td>`用于数据单元格，而`<th>`用于表头单元格。表格中的每个单元格可以跨越多个行或列，分别通过`rowSpan`和`...
手动进行table的合并列操作
weixin_43936040的博客
03-26 828
手动进行表格的合并列操作 前提：vue的前端框架，加原生的table 需求： 点击表格的尾部的操作新增按钮可以新增并合并行 删除的时候删除行并改变合并的列 最后按json的格式提交表数据给后台 思路： 做一个二维数组，每个数组表示是表格一行，每行里的对象是每一行的td，每个td带一个rowspan或者colspan的属性表示要操作合并的项 然后利用vue做数据驱动操作数据就可以正常的合并了 数据示例 [ [ {val: 1, name: '', rowspan: -1}, {val: 1, na
css固定表格头部
weixin_41141811的博客
06-25 1384
固定表头 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定表头</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } .table-container {
HTML的table的 rowspan, colspan 用法
weixin_30583563的博客
07-22 2877
1 　　<!-- 2 rowspan=x, 表示展几行，如学号，姓名等占两行，18占三行 3 colspan=x， 表示占几列，如成绩占三列 4 　　--> 5 <table border="1" cellspacing="0"> 6 <tr> ...
<html>table、th
大草包的博客
05-13 530
<table align/bgcolor/border/width cellpadding- 规定单元边沿与其内容之间的空白。 cellspacing- 规定单元格之间的空白。 summary =<!--表格的摘要--> fram = 外侧边框的哪个部分是可见的。 "void"
HTML表格（格式、跨行、跨列）
jabajhdjvd的博客
10-25 847
内容</td><td colspan="所跨列数">内容</td><th> 内容</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容
HTML表格跨行、跨列操作(rowspan、colspan)
热门推荐
sning999
02-28 23万+
一般使用&lt;td&gt;元素的colspan属性来实现单元格跨列操作，使用&lt;td&gt;元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。其取值为number，如下图所示：例如：&lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;星期一&lt;/th&gt;
HTML--table--跨行跨列
weixin_46858088的博客
12-14 2095
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跨行跨列</title> <style type="text/css"> table{ border: 1px solid; width: 500px; } table td,th{ border: 0.0625rem solid; ...
HTML ＜table＞＜/table＞跨行跨列
qq_27232945的博客
11-01 236
<table width="500" height="500" cellspacing="0" border="1"> <tr> <td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr>.
html中 table的 colspan和rowspan
宝码香车的博客
05-30 716
Rowspan= 单元格跨越多行。
HTML基础知识：表格表头<th>属性详解
在HTML中，`<th>`标签用于定义表格的表头单元格，它提供了一种特殊的方式来突出显示表格中的列标题或行标题。这个标记拥有多个属性，用于定制其外观和布局： 1. `bgcolor`：这是一个旧属性，用于设置表头的背景颜色...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值