day05 - 表格

用户3666823915731
36 阅读11分钟

1. 表格

用在这里

1.1. 什么是表格

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

t3.png

语法

表格是由<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.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. 在老师电脑上写出一个宽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不写不会自动生成

  1. 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

2.6. 作业6

2.7. 作业7

avatar
文章
阅读
粉丝