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

news2024/11/16 1:28:10

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>