【HTML】标签学习(下.1)

(大家好哇,标签学习(上)的部分告别了一小段落,今天我们将继续来学习HTML(下)的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

目录

[一. 表格标签](#一. 表格标签)

[1.1 表格的主要作用](#1.1 表格的主要作用)

[1.2 表格的基本语法](#1.2 表格的基本语法)

[1.3 表头单元格标签](#1.3 表头单元格标签)

[1.4 表格属性](#1.4 表格属性)

[1.5 表格结构标签](#1.5 表格结构标签)

[1.6 合并单元格](#1.6 合并单元格)

[1.6.1 合并单元格方式:](#1.6.1 合并单元格方式:)

[1.6.2 目标单元格:(写合并代码)](#1.6.2 目标单元格:(写合并代码))

[1.6.3 合并单元格步曲](#1.6.3 合并单元格步曲)

[1.7 表格总结](#1.7 表格总结)


一. 表格标签

(目标:能够书写表格)

表格是实际开发中非常常用的标签:1.表格的主要作用 2.表格的基本语法.。

1.1 表格的主要作用

  • 表格主要用于显示、展示数据,因为它可以让数据显示的非常规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显的很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。
  • 表格不是用来布局页面的,而是用来展示数据的。

1.2 表格的基本语法

<table>

<tr>

<td> 单元格内的文字 </tr>

......

</tr>

......

</table>

  1. <table></table>是用于定义表格的标签。
  2. <tr></tr>标签用于定义表格中的行,必须嵌套在<table> </table>标签中。
  3. <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
  4. 字母 td 指表格数据(table date)即数据单元格内容。

1.3 表头单元格标签

  • 一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示
  • <th> 标签表示HTIML表格的表头部分(table head的缩写)

|--------|--------|--------|
| 姓名 | 性别 | 电话 |
| 小王 | 女 | 130xxx |
| 小李 | 男 | 150xxx |
[个人信息表]

<table>

<tr>

<th> 姓名 </th>

......

</tr>

......

</table>

1.4 表格属性

  • 表格标签这部分属性我们实际开发不常用,后面通过CSS来设置.。
  • 目的有2个:
  1. 记住这些英语单词,后面CSS会使用。
  2. 直观感受表格的外观形态。

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

这些属性要写到表格标签table里面。

1.5 表格结构标签

  • 使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
  • 在表格标签中,分别用:<thead>标签 表格的头部区域,<tbody>标签 表格的主体区域,这样可以更好的分清表格结构。
  1. <thead></thead>:用于定义表格的头部<thead>内部必须拥有<tr>标签,一般是位于第一行。
  2. <tbody></tbody>:用于定义表格的主体,主要用于放数据本体。
  3. 以上标签都是放在<table></table>标签中.。

1.6 合并单元格

  • 特殊情况下,可以把多个单元格合并为一个单元格,这里会最简单的合单元格即可。

1.6.1 合并单元格方式:

  1. 跨行合并:rowspan="合并单元格的个数
  2. 跨列合井:colspan="合并单元格的个数"

1.6.2 目标单元格:(写合并代码)

  1. 跨行:最上顶侧单元格为目标,单元格,写合并代码。
  2. 跨列:最左单元格为目标单元格,写合并代码

1.6.3 合并单元格步曲

  1. 先确定是跨行还是跨列合并。
  2. 找到目标单元格,写上合并方式=合并的单元格数量 。eg:<td colspan="2"> </td>
  3. 删除多余的单元格.。

1.7 表格总结

三大部分:1.表格的相关标签 2.表格的相关属性 3.合并单元格.

  1. <table></table> ; <tr></tr>行 ; <td></td>单元格 ; <th></th>表头单元格 ; <thead>表格头部区域 ; <tbody>表格主体区域。
  2. <align> ; <border> ; <cellpadding> ; <cellspacing> ; <width>
  3. 合并单元格。

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:努力拼搏是最美姿态,超越自我是最佳状态。)

相关推荐
格林威1 分钟前
工业相机图像高速存储(C#版):内存映射文件方法,附Basler相机C#实战代码!
开发语言·人工智能·数码相机·c#·机器视觉·工业相机·堡盟相机
星期五不见面1 分钟前
AI学习(三)openclow启动(2)2026/03/05
学习
Nuopiane2 分钟前
MyPal3(3)
java·开发语言
KerwinChou_CN4 分钟前
什么是流式输出,后端怎么生成,前端怎么渲染
前端
lihihi6 分钟前
P1650 [ICPC 2004 Shanghai R] 田忌赛马(同洛谷2587)
开发语言·算法·r语言
阿蒙Amon7 分钟前
C#常用类库-详解Autofac
开发语言·c#
爱上妖精的尾巴7 分钟前
8-18 WPS JS宏 正则表达式-边界匹配
开发语言·javascript·正则表达式·wps·jsa
格林威7 分钟前
工业相机图像高速存储(C#版):内存映射文件方法,附堡盟相机C#实战代码!
开发语言·人工智能·数码相机·计算机视觉·c#·工业相机·堡盟相机
爱上妖精的尾巴7 分钟前
8-20 WPS JS宏 正则表达式-懒惰匹配
服务器·前端·javascript
波波0078 分钟前
每日一题:什么是强类型语言和弱类型语言?
开发语言