HTML零基础自学笔记（下）篇一 -8.8

HTML零基础自学笔记（下）---之表格标签详解

参考：pink老师
篇一、表格标签是什么？
- 基础内容（主要作用、基本语法、标签释义、属性）
- - 主要作用
  - 基本语法
  - 标签释义
  - 表格结构标签
  - 属性
- 合并单元格
- 代码练习
- - 代码运行效果（表格基础结构）
  - 代码展示--表格基础结构
  - 代码运行效果（合并第一行2，3列；合并第2列2，3行）
  - 代码--合并单元格

参考：pink老师

提示：html下篇主要内容
html下篇笔记主要涉及①表格标签②列表标签③表单标签

提示：以下是本篇文章正文内容，下面案例可供参考

篇一、表格标签是什么？

在这里插入图片描述

基础内容（主要作用、基本语法、标签释义、属性）

主要作用

为了展示数据，通过表格的形式使得数据更加规整，更好阅读

基本语法

<table><tr><td> 文本内容 </td></tr>
</table>

标签释义

<table></table> 用于定义表格的标签（可以理解为一个框框，表格最外边的边框有了边框才能填写内容，就相当于是excle文件才能写表格）；
<tr></tr> 用于定义表格中的行，必须嵌套在table（表格）标签中使用 --有了表格才能有行；
<td></td> 用于定义表格中的单元格，必须嵌套在tr（行）标签中使用 --在行中才能写数据；
<th></th> 表头单元格，位于表格的第一行或第一列，与普通单元格的差别是表头单元格中的文本内容是加粗居中的。

表格结构标签

因为表格可能会比较长，为了更好的展示和表达表格的语义。可以将表格分割成表格头部和表格主题这俩部分。在表格标签中，分别用：标签表格的头部区域、标签表格的主体区域. 这样可以更好的分清表格结构。
总结:
1. <thead></thead>：用于定义表格的头部。内部必须拥有标签。一般是位于第一行。
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上标签都嵌套在table标签中。

属性

语法规范
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
在这里插入图片描述

合并单元格

特殊情况下，需要把多个单个单元格合并成一个单元格。有两种类型，跨行合并和跨列合并。
跨行合并 rowspan="合并单元格个数"
跨列合并 colspan="合并单元格个数"
在这里插入图片描述
合并单元格三部曲
1、确认是跨行还是跨列；
2、找到目标单元格，写上合并方式=合并的单元格数量 <td colspan="2'></td>
3、删除多余单元格
目标单元格
跨行：最上侧的单元格为目标单元格
跨列：最左侧的单元格为目标单元格

代码练习

代码运行效果（表格基础结构）

一默认border=“0” 不显示边框

在这里插入图片描述
二设置border=“1” 显示边框 <table border="1">

代码展示–表格基础结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table><tr><td>性别</td><td>姓名</td><td>年龄</td></tr><tr><td>男</td><td>张三</td><td>98</td></tr><tr><td>男</td><td>李四</td><td>18</td></tr><tr><td>女</td><td>小五</td><td>26</td></tr></table>
</body></html>

代码运行效果（合并第一行2，3列；合并第2列2，3行）

在这里插入图片描述

代码–合并单元格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" cellspacing="0" cellpadding="20"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body></html>