HTML5 表格详情_html5表格-CSDN博客

本文链接：https://blog.csdn.net/m0_66451927/article/details/122745107

本文详细介绍了HTML5中创建和操作表格的方法，包括基本表格结构、表格标题、表格属性，重点讲解了如何合并单元格，并提供了实际示例。内容涵盖表格的创建、<caption>标签、表格属性、rowspan和colspan的使用，强调了表格的本质和CSS在美化表格中的作用。

摘要由CSDN通过智能技术生成

一、创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

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

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

1、<table>标签用于定义一个表格。

2、<tr >标签用于定义表格中的一行，必须嵌套在< table>标签中，在 <table>中包含几对< tr>，就有几行表格。

3、<td >标签：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列或多少个单元格。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

二、表格结构

在使用表格进行布局时，可以将表格划分为头部<thead></thead>、主体<tbody></tbody>和页脚<tfoot></tfoot>，使得表格结构更清晰，方便阅读理解；通过使用这些元素，当包含多个页面的长的表格被打印时，每张页面上表格都包含表头和表尾数据。具体解释如下：

表格结构标签
标签名	简介	具体使用
<thead></thead>	表头，用于定义表格的头部	必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>	主体，用于定义表格的主体	位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
<tfoot></tfoot>	表尾，用于定义表格的尾部	必须位于<table></table> 标签中，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前，<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。

三、表格标题<caption>

定义和用法：caption 元素定义表格标题。<caption >标签必须紧随 <table >标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<table>
   <caption>我是表格标题</caption>
</table>

四、表格属性

表格的属性
属性名	作用	常用属性值
border	设置表格边框	像素值（如：1px）
bordercolor	设置表格边框颜色
cellspacing	设置单元格与单元格之间的空白间距	像素值（默认为2px）
cellpadding	设置单元格与单元格边框之间的空白间距	像素值（默认为1px）
width	设置表格宽度	像素值
height	设置表格高度	像素值
align	设置表格在网页中的水平对齐方式，可具体到单元格	left、center、right
valign	设置表格在网页中的垂直对齐方式，用于行内	top、bottom、middle
bgcolor	设置表格背景色
background	设置表格背景图	图片相对路径

五、合并单元格(难点)

1、合并种类

跨行合并：rowspan

跨列合并：colspan

2、合并单元格的思想：

将多个内容合并的时候，会有多余的部分，要把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除这2个表格。记住：删除的个数 = 合并的个数 - 1；合并的顺序一般是先上左，后下右。

六、总结

表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。

七、示例

复制代码运行一遍，然后查看运行结果，对照上面的说明，可以更好地理解表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格table</title>
</head>
<body>
    <h1>表格创建</h1>
    <table>
        <tr>
            <th>第一行第一列</th>
            <th>第一行第二列</th&g