day05 - 表格布局

已于 2025-08-16 16:13:48 修改
阅读量69 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 阶段一：全平台网页开发 文章标签： 前端 javascript html css CSS3 html5 table表格
于 2025-08-07 20:46:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010544438/article/details/150022584

1. 表格

用在这里：

1.1. 什么是表格

表格，即是一种可视化交流模式，又是一种组织整理数据的手段

语法：

表格是由<table></table>标签来定义
每个表格均有若干行由<tr></tr>标签来定义（th代表的是表格的表头和td使用方法一致只是视觉表现不同）
每行被分割为若干个单元格由<td></td>标签来定义

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table border="1">
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr>
        <td>曹操</td>
        <td>关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

效果：

课堂互动：

1. 在网页中实现表格，语法格式正确的是

    A：<table><tr><td>内容</td></tr></table>

    B：<table><tr>内容</tr><td>内容</td></table>

    C：<table><tr><th>内容</th><td>内容</td></tr></table>

    D：<table><tr><td><th>内容</th></td></tr></table>

1.2. table属性

表格的属性

1.2.1. width（宽度）

语法：

<table width="数值"></table>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
            <th>吴国</th>
        </tr>
        <!-- 行标签 -->
        <tr>
            <!-- 单元格标签 -->
            <td>郭佳</td>
            <td>刘备</td>
            <td>孙策</td>
        </tr>
        <tr>
            <td>曹操</td>
            <td>关羽</td>
            <td>小乔</td>
        </tr>
        <tr>
            <td>夏侯惇</td>
            <td>张飞</td>
            <td>大乔</td>
        </tr>
    </table>
</body>
</html>

效果：

1.2.2. height（高度）

语法：

<table height="数值"></table>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
        border="1"
        width="240"
        height="200"
        >
        <tr>
            <th>魏国</th>
            <th>蜀国</th>
            <th>吴国</th>
        </tr>
        <!-- 行标签 -->
        <tr>
            <!-- 单元格标签 -->
            <td>郭佳</td>
            <td>刘备</td>
            <td>孙策</td>
        </tr>
        <tr>
            <td>曹操</td>
            <td>关羽</td>
            <td>小乔</td>
        </tr>
        <tr>
            <td>夏侯惇</td>
            <td>张飞</td>
            <td>大乔</td>
        </tr>
    </table>
</body>
</html>

效果：

1.2.3. border（边框）

语法：

<table border="数值"></table>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="10"
      width="240"
      height="200"
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr>
        <td>曹操</td>
        <td>关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

效果：

1.2.4. bgcolor（背景色）

语法：

<table bgcolor="颜色单词/16进制/rgba"></table>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="10"
      width="240"
      height="200"
      bgcolor="orange" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
			<td>孙策</td>
		</tr>
		<tr>
			<td>曹操</td>
			<td>关羽</td>
			<td>小乔</td>
		</tr>
		<tr>
			<td>夏侯惇</td>
			<td>张飞</td>
			<td>大乔</td>
		</tr>
	</table>
</body>
</html>

效果：

1.2.5. align（位置）

语法：

<table align="left(默认)/center/right"></table>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="10"
      width="240"
      height="200"
      bgcolor="orange"
      align="center" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
			<td>刘备</td>
			<td>孙策</td>
		</tr>
		<tr>
			<td>曹操</td>
			<td>关羽</td>
			<td>小乔</td>
		</tr>
		<tr>
			<td>夏侯惇</td>
			<td>张飞</td>
			<td>大乔</td>
		</tr>
	</table>
</body>
</html>

效果：

1.2.6. cellspacing（单元格间距）

画图说明：

语法：

<table cellspaceing="数值"></table>
默认值为2

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr>
        <td>曹操</td>
        <td>关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

效果：

1.2.7. cellpadding（单元格里面的内容到边框的距离）

画图：

语法：

默认值为1px
<table cellpadding="数值"></table>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr>
        <td>曹操</td>
        <td>关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

效果：

1.2.8. 课堂互动

1. 在老师电脑上写出一个宽400px、高300px、3行3列、边框为5px、背景色为你上衣颜色的颜色、居中显示的表格

1.3. tr（行）属性

1.3.1. height（高度）

语法：

<table>
  <tr height="数值">
    <td></td>
  </tr>
</table>
tr上没有width，添加无效

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr height="70">
        <td>曹操</td>
        <td>关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

效果：

1.3.2. bgcolor（背景色）

语法：

<table>
  <tr bgcolor="颜色单词/16进制/rgba">
    <td></td>
  </tr>
</table>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr 
        height="70"
        bgcolor="red"
        >
        <td>曹操</td>
        <td>关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

效果：

1.3.3. align（水平位置）

语法：

<table>
  <tr align="left(默认值)/center/right">
    <td></td>
  </tr>
</table>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr 
        height="70"
        bgcolor="red"
        align="center" 
        >
        <td>曹操</td>
        <td>关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

效果：

1.3.4. valign（垂直位置）

和align类似，但是align属性说的是水平位置（左（默认）中右）

valign说的是垂直的位置（上中（默认）下）

语法：

<table>
  <tr valign="top/middle(默认值)/bottom">
    <td></td>
  </tr>
</table>
<!-- 
  top: 顶部
  middle：中间
  bottom：下面
-->

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr 
        height="70"
        bgcolor="red"
        align="center" 
        valign="top"
        >
        <td>曹操</td>
        <td>关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

效果：

课堂互动：

1. 在老师电脑上写出一个宽400px、高300px、3行3列、边框为5px、背景色为你上衣颜色的颜色、居中显示的表格

2. 在上个例子的基础上，在第二行上面实现背景色为你同桌上衣颜色的颜色、靠右显示、垂直在顶部

    1.4. 单元格属性

    就是td标签上面的属性

    1.4.1. width（宽度）

    语法：

    <table>
  <tr>
    <td width="数值"></td>
  </tr>
</table>

    代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr 
        height="70"
        bgcolor="red"
        align="center" 
        valign="top"
        >
        <td>曹操</td>
        <td
          width="100"
          >关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

    效果：

    1.4.2. height（高度）

    1.4.3. align（水平位置）

    语法：

    <table>
  <tr>
    <td align="left/center/right"></td>
  </tr>
</table>

    代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr 
        height="70"
        bgcolor="red"
        align="center" 
        valign="top"
        >
        <td>曹操</td>
        <td
          width="100"
          align="right"
          >关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

    效果：

    1.4.4. valign（垂直位置）

    语法：

    <table>
  <tr>
    <td valign="top/middle/bottom"></td>
  </tr>
</table>

    代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr 
        height="70"
        bgcolor="red"
        align="center" 
        valign="top"
        >
        <td>曹操</td>
        <td
          width="100"
          align="right"
          valign="bottom"
          >关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

    效果：

    1.4.5. bgcolor（背景）

    语法：

    <table>
  <tr>
    <td bgcolor="颜色单词/16进制/rgba"></td>
  </tr>
</table>

    代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td>郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr 
        height="70"
        bgcolor="red"
        align="center" 
        valign="top"
        >
        <td>曹操</td>
        <td
          width="100"
          align="right"
          valign="bottom"
          bgcolor="green"
          >关羽</td>
        <td>小乔</td>
      </tr>
      <tr>
        <td>夏侯惇</td>
        <td>张飞</td>
        <td>大乔</td>
      </tr>
    </table>
  </body>
</html>

    效果：

    课堂互动：

    1. 在老师电脑上写出一个宽400px、高300px、3行3列、边框为5px、背景色为你上衣颜色的颜色、居中显示的表格

    2. 在上个例子的基础上，在第二列上面实现背景色为你后桌上衣颜色的颜色、靠右显示、垂直在顶部

      1.5. table、tr、td属性总结

      1.6. 合并单元格

      用在这里：

      1.6.1. colspan

      colspan 属性是单元格横向合并的属性，也称单元格水平合并

      语法：

      <td colspan="数值">内容</td>

注意：合并单元格colspan取值范围最小是2，最大是由当前单元格的数量决定的

      代码：

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
		</tr>
		<!-- 行标签 -->
		<tr>
			<!-- 单元格标签 -->
			<td>郭佳</td>
			<td>刘备</td>
			<td>孙策</td>
		</tr>
		<tr>
			<td colspan="3">曹操</td>
			<td
				width="100"
			>关羽</td>
			<td>小乔</td>
		</tr>
		<tr>
			<td>夏侯惇</td>
			<td>张飞</td>
			<td>大乔</td>
		</tr>
	</table>
</body>
</html>

      效果：

      1.6.2. rowspan

      rowspan 属性是单元格的垂直合并属性，也称为单元格多行合并

      语法：

      <td rowspan="数值">内容</td>
注意：0代表了合并当前单元格下面的所有，最小取值为2，最大取值就是当前单元格下面行的数量

      代码：

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table表格学习</title>
  </head>
  <body>
    <!-- table标签来定义我们的表格 -->
    <table 
      border="1"
      width="240"
      height="200"
      bgcolor=""
      align="center" 
      cellspacing="0" 
      cellpadding="0" 
      >
      <tr>
        <th>魏国</th>
        <th>蜀国</th>
        <th>吴国</th>
      </tr>
      <!-- 行标签 -->
      <tr>
        <!-- 单元格标签 -->
        <td rowspan="3">郭佳</td>
        <td>刘备</td>
        <td>孙策</td>
      </tr>
      <tr>
        <td>曹操</td>
        <td
				width="100"
			>关羽</td>
			<td>小乔</td>
		</tr>
		<tr>
			<td>夏侯惇</td>
			<td>张飞</td>
			<td>大乔</td>
		</tr>
	</table>
</body>
</html>

      效果：

      课堂互动：

      1. 分析下边的HTML代码，则选项中的说法错误的是

      ＜table border ="10"  align=“center"＞ 
  ＜tr＞＜td colspan="2" align=“center"＞姓名＜/td＞＜/tr＞ 
  ＜tr＞＜td align=“center"＞成绩＜/td＞＜td align=“center"＞语文＜/td＞＜/tr＞ 
＜/table＞

          A：表格的边框为2

          B：表格的边框为2

          C：“姓名"跨3列

          D：该表格中的文字均居中显示

      1.7. 1像素表格边框

      思路：

      1. 给表格设置背景你要的1像素边框是什么颜色就设置背景为什么颜色
      2. 单元格的间距cellspacing设置为1
      3. 把每一行设置为白色

      这样利用背景色和单元格的间距就能实现表格的边框为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 border="0" cellspacing="1" cellpadding="0" bgcolor="red">
        <tr bgcolor="#FFFFFF">
            <td>
                序号
            </td>
            <td>
                姓名
            </td>
        </tr>
        <tr bgcolor="#ffffff">
            <td>
                1
            </td>
            <td>
                张三
            </td>
        </tr>
    </table>
</body>

</html>

      效果：

      1.8. 表格嵌套

      表格嵌套属于表格的布局方式

      效果图：

      思路分析：

      通过表格嵌套完成排版，单元格可以包含文本、图片、列表、段落、表单等元素

      1. 最外层表格的视线

      1. 书写表格基本结构
      2. 设置表格宽高
      3. 设置单元格宽高

      2. 实现左侧内容的填充

      1. 在第一个单元格中插入图片

      3. 内部嵌套表格的制作

      1. 书写h标签，设置align属性居中
      2. 制作细线条表格（三大步不要忘记了）
      3. 嵌套p标签、font标签、color属性

      代码：

      <!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 width="1250px" align="center">
        <tr>
            <td align="center" rowspan="2"><img src="./imgs/jd.png" alt=""></td>
            <td valign="middle" width="50%">
                <p align="center">车辆检测</p>
                <table width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="#607d8b" align="center">
                    <tbody bgcolor="#ffffff" align="center">
                        <tr>
                            <td><font color="#495056" size="2">事故排查检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                            <td><font color="#495056" size="2">外观内饰检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                            <td><font color="#495056" size="2">易损耗部件</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                        </tr>
                        <tr>
                            <td><font color="#495056" size="2">常用功能检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                            <td><font color="#495056" size="2">启动驾驶检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                            <td><font color="#495056" size="2">轻微碰撞</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                        </tr>
                        <tr>
                            <td><font color="#495056" size="2">安全系统检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                            <td><font color="#495056" size="2">外部配置检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                            <td><font color="#495056" size="2">内部配置检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                        </tr>
                        <tr>
                            <td><font color="#495056" size="2">灯光系统检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                            <td><font color="#495056" size="2">高科技配置检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                            <td><font color="#495056" size="2">随车工具检测</font></td>
                            <td><img src="./images/true.png" alt="确认" /></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td valign=" top" width="50%">
                <p>
                    <font color="#495056" size="2">
                        <font color="#e54121"><b>服务保障</b></font>（瓜子已对车辆进行检测，并提供30天可退保障）<br/><br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经检测此车排除重大事故，无火烧，无水泡，外观贴隐形车衣，内饰正常磨损，保单、登记证未见，车主自述无抵押贷款，能正常过户，排放标准请以车管所低档为准，车辆配置以实车为准
                        <br/><br/>
                    </font>
                    <font color="#22ac38" size="2"><b>
                         30天可退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 调表车赔付&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 禁售盗抢查封车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 259项检测</b>
                    </font>
                </p>
            </td>
        </tr>
    </table>
</body>
</html>

      效果：

      1.9. 扩展标签

      1. 标签含义解释一下

      2. 写一个表格然后不写tbody，然后从控制台审查元素，会看到其实有tbody标签，凸显出自动会生成tbody

      1. 代码
      2. 效果

      如果不写tbody会自动生成，但是thead和tfoot不写不会自动生成

      3. Thead、tbody、tfoot写法可以乱，比如把tfoot放在thead上面但是浏览器在解析的时候还是按照头、身体、脚顺序加载的

      1. 代码
      2. 效果

      1.9.1. thead标签

      语法：

      如果使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody
thead标题行

      代码：

      <!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>Document</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>月份</th>
          <th>花费</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>总计</td>
          <td>180元</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>一月</td>
          <td>100元</td>
        </tr>
        <tr>
          <td>二月</td>
          <td>80元</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

      效果：

      1.9.2. tbody标签

      语法：

      如果使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody
tbody数据行

      代码：

      <!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>Document</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>月份</th>
          <th>花费</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <td>总计</td>
          <td>180元</td>
        </tr>
      </tfoot>

      <tbody>
        <tr>
          <td>一月</td>
          <td>100元</td>
        </tr>
        <tr>
          <td>二月</td>
          <td>80元</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

      效果：

      1.9.3. tfoot 标签

      语法：

      如果使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody
tfoot页脚行

      代码：

      <!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>Document</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>月份</th>
          <th>花费</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <td>总计</td>
          <td>180元</td>
        </tr>
      </tfoot>

      <tbody>
        <tr>
          <td>一月</td>
          <td>100元</td>
        </tr>
        <tr>
          <td>二月</td>
          <td>80元</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

      效果：

      1.9.4. caption标签

      语法：

      写在table标签内，代表表格标题
例：
<table>
  <caption></caption>
  <tr> 
    <td></td>
  </tr>
</table>

      代码：

      <!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>Document</title>
</head>
<body>
    <table border="1px" width="500px" height="400px">
        <caption>表格标题</caption>
        <tr> 
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr> 
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr> 
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
     </table>
</body>
</html>

      效果：

      2. 作业

      2.1. 作业1

      2.2. 作业2

      2.3. 作业3

      2.4. 作业4

      2.5. 作业5

      瓜子二手车直卖网http://43.138.15.137:9007/p1/table/zuoye1/index.html

      【Python百日基础系列】Day22 - Dash布局实例(二)
      专注于医院数据分析技术与系统开发的创作与分享。
      11-14 1726
      文章目录三、Dash布局实例（续）3.2 实例2：自定义HTML文本样式3.3 实例3：表格3.4 实例4：散点图3.5 实例5：Markdown补充视频代码： 视频讲解： 【Python百日基础系列】22 - Dash布局实例(二) 三、Dash布局实例（续） Dash 包括“热重载”，当您使用app.run_server(debug=True). 这意味着当您更改代码时，Dash 会
      hw05-Third-Party-APIs-Work-Day-Scheduler
      04-01
      【标题】"hw05-Third-Party-APIs-Work-Day-Scheduler" 是一个项目，旨在利用第三方API来创建一个工作日计划器。这个计划器可能是为了帮助用户更有效地管理他们每天的工作时间。 【描述】"hw05-第三方API-工作日计划...
      Day03-12：Element-案例-基本页面布局
      m0_63464979的博客
      07-02 508
      默认情况下展示的是根组件里面的内容，也就是App.vue,而现在想展示的ElementView.vue里面的内容，所以就需要在根组件中引入ElementView.vue里面的内容。http://yapi.smart-xwork.cn/mock/169327/emp/list(老师给的，打不开)1.Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。2.组件：组成网页的部件，例如：超链接、图片、按钮、表格、表单、分页条等等。
      Day06-07
      03-14
      CSS还支持盒模型（Box Model），包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，这些都是理解网页元素布局的关键。 此外，CSS3引入了许多新特性，如Flexbox（弹性盒子模型）和Grid（网格布局...
      我用Gemini3pro 造了个手控全息太阳系
      乐于分享，共同成长
      11-28 38
      摘要：作者开发了一个基于Web的沉浸式3D太阳系互动项目，通过Three.js实现逼真的天体渲染，并集成MediaPipe手势识别技术，用户只需摄像头即可用手势控制太阳系模型。核心功能包括：真实轨道和自转动画、UnrealBloomPass辉光特效、左手捏合缩放、右手食指控制旋转。技术栈采用Three.js、MediaPipe Hands和Vite，实现了突破传统输入方式的创新交互体验。项目展示了前端技术与AI视觉结合的潜力，代码已开源供体验。
      前端在移动端中的页面切换
      2509_93939582的博客
      11-28 451
      记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。
      springBoot 2.x.x MetaObjectHandler自动填充不生效
      Billow_lamb的博客
      11-27 204
      这个文件在全局拦截中做处理 通过前端的请求头里面去解析token信息 然后去redis 的key的匹配前端的token 在通过redis去解析 拿到 当前登录用户信息。MetaObjectHandler自动填充不生效 踩空日记。企鹅群 398913416。
      一文让你了解UI自动化测试
      HUACE4600的博客
      11-26 940
      这些资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！凡事要趁早，特别是技术行业，一定要提升技术功底。
      MyBatis + PageHelper 分页内幕，PageHelper 是如何动态构建 LIMIT 分页 SQL 的
      日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
      11-26 1188
      若依系统中有很多的表格数据、后端接口实体中并没有看到有接收分页大小和页码的属性，在系统的mapper层面SQL语句中并没有看到对应的分页限制。它是如何实现这个分页效果的呢？是将所有的数据查询出来，然后再分页吗？这样效率岂不是非常低。带着这样的疑问，稍微研究了一下这个系统的分页方法。更多详细文章后端是通过从 HttpServletRequest 对象中获取分页的页码和大小，然后创建Page分页对象，在执行sql查询的时候，动态构建分页限制条件。从而实现分页，并不是在查询到所有数据之后再进行的分页处理。
      【前端】SVGA报错：[SVGA Parser Error] this parser only support version@2 of SVGA.
      karshey的博客
      11-27 347
      摘要：在使用svga库解析SVGA文件时遇到版本不兼容报错，提示仅支持版本2。通过查看源码发现，该库通过检查文件头4个字节是否为特定值(80,75,3,4)来判断版本，不符合则为版本2。当前遇到的SVGA文件被识别为版本1导致报错。由于是官方库限制，建议更换SVGA文件链接而非修改代码解决。
      前端跨域解决方案
      2509_93942660的博客
      11-28 459
      如果涉及带凭证的请求，比如cookie，还得加Access-Control-Allow-Credentials: true，并且Origin不能是通配符。原理很简单，前端请求发给同域的代理，代理再转发给目标服务器，绕过浏览器限制。比如，你页面里嵌了个第三方iframe，想和它通信，就可以用window.postMessage发消息，对方用message事件接收。JSONP适合老项目，CORS是首选标准，代理在开发时好用，WebSocket专攻实时，postMessage处理iframe问题。
      Rust在Web中的前端框架
      2509_93947499的博客
      11-26 342
      Yew用了虚拟DOM来优化渲染，组件状态管理也简单，举个例子，你写个计数器组件，代码结构清晰，还能用Rust的强类型系统避免运行时错误。Seed不用虚拟DOM，直接操作DOM，性能可能更好，但代码写起来得小心点，别把浏览器搞崩了。想想看，用户点个按钮，背后可能触发一堆异步操作，要是用JavaScript，一不小心就内存泄漏或者变量污染，调试起来头大。另外，Rust的性能接近C++，编译成WASM后，在浏览器里执行效率高，能处理复杂计算或者图形渲染，比如游戏或者数据可视化应用，加载速度嗖嗖的。
      酷秒神马 9.0 版源码系统实测
      2501_93715493的博客
      11-28 482
      核心技术升级诚意满满：播放器搭载 FFmpeg 6.1 内核 + ExoPlayer 2.21.0 双引擎，全面支持 4K HDR 10 + 解码和 Dolby Vision 视觉技术，配合智能码率适配（ABR）算法，能根据网络波动自动切换 2K/4K 画质，50Mbps 带宽下 4K 视频加载延迟低于 800ms，卡顿率直降 50%。新增的 P2P 加速传输模块，让热门影片播放时服务器带宽占用减少 40%，低配服务器也能稳定支撑千人同时在线。注：学习交流专用，使用遇到的问题与本人、分享者无关。
      前端路由管理
      2509_93941777的博客
      11-28 370
      这种机制在单页应用（SPA）中特别常见，比如Vue.js或React项目里，用户点击链接时，URL会变，但页面不会整体刷新。这样一来，应用可以更流畅，减少等待时间。记得有一次，我在一个电商项目里用Vue Router做商品详情页的路由，通过动态路由参数传递商品ID，配合axios异步加载数据，页面切换又快又顺。通过动态import()语法，可以把路由组件拆分成独立的chunk，用户访问时才加载，大大提升首屏速度。还有404页面的处理，最好设置一个通配符路由，捕获所有未匹配的路径，避免用户看到空白页。
      前端开发博客写作技巧与建议
      Irene1991的博客
      11-27 892
      技术博客写作应平衡专业性与亲和力。核心建议：避免纯个人情绪表达，但可将个人经验转化为有价值的内容。重点包括：1）开篇用问题导向取代自我陈述；2）将踩坑经历提炼为实用方法论；3）始终以"对读者是否有帮助"为标准取舍内容。最佳实践是保持技术干货密度，同时用项目实战背景增强可信度，使文章既专业又具个人特色。记住定位为"问题解决者"而非"日记作者"，这样既能提供实用价值，又能建立读者信任。
      ASP.NET CheckBoxList 实战：从数据库到选专业页面的完整数据绑定指南
      m0_74456227的博客
      11-26 1158
      本文介绍了ASP.NET Web Forms中CheckBoxList控件的实际应用，通过学生选专业场景展示了完整实现流程。文章提供了前后端完整代码示例，包括从数据库绑定专业数据到CheckBoxList、处理用户选择变更事件以及保存功能示例。重点讲解了AutoPostBack机制、数据绑定方法和错误处理，同时给出了连接字符串管理建议和性能优化方向。该示例可直接运行，并可根据实际需求扩展为完整的选课系统功能。
      【从0开始学前端】html标签总结
      2301_80057732的博客
      11-26 1006
      html标签总结
      SpringBoot后端服务重定向
      2509_94200968的博客
      11-27 710
      选择哪种方法取决于具体需求和架构。在我的场景中，使用了Spring MVC的重定向。但如果需要一个长期的解决方案，需要考虑前端同步更新，避免不必要的重定向的开销。或者使用反向代理或者Spring Cloud Gateway。愿你我都能在各自的领域里不断成长，勇敢追求梦想，同时也保持对世界的好奇与善意！
      【技术分享】前端跨窗口/标签页面通信：掌握以下几种方法，提升用户体验（附带常用场景以及典例）
      最新发布
      qq_45796592的博客
      11-29 723
      本文介绍了前端跨标签页通信的7种实现方法及其适用场景。文章通过具体代码示例以及典例，帮助开发者根据实际需求选择最适合的跨标签通信方案，提升应用性能和用户体验。
      HTML日程规划工具c05-Day-Planner解析
      描述“c05日程”提供的是一个更为具体的关于这个计划器的线索。在这里，“c05”很可能是该计划器的编号或者是某个特定版本的代号，而“日程”这个词再次强化了与日程管理相关的功能。 从标签“HTML”我们可以得知这...
      评论
      添加红包

      请填写红包祝福语或标题

      个

      红包个数最小为10个

      元

      红包金额最低5元

      当前余额3.43元 前往充值 >
      需支付：10.00元
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付元
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明：

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

      余额充值