标签：1.4 表格 1.2 单元格 HTML 概述 nbsp 属性
学习目标：
（1）使用表格的基本结构实现简单表格
（2）使用表格相关标签实现跨行、跨列的复杂表格
HTML表格概述
1.1 表格的作用
（1）用来布局内容比较整齐的页面
（2）作为信息管理页面的控件使用
1.2 表格标签
1.2.1 < table >< table />
<table><table/>：表示一个表格，它的常用属性有以下几种：
| 属性 | 含义 |
|---|---|
| border | 边框线的宽度 |
| align | 表格在页面中的对齐方式 |
| bgcolor | 表格背景色 |
| background | 设置背景图片 |
| cellpadding | 单元格内容和边框之间的距离 |
| cellspacing | 单元格之间的距离 |
格式：
<table border="边框线的宽度" align="表格在页面中的对齐方式" bgcolor="表格的背景色" background="背景图片"></table>
1.2.2 < thead >< /thead >
<thead></thead>：语义标签，表示表格的头部
1.2.3 < tr >< tr/ >
<tr><tr/>：表示表格的行，一个tr代表一行
| 属性 | 含义 |
|---|---|
| align | 行的对齐方式 |
| bgcolor | 行的背景色 |
| background | 设置背景图片 |
格式：
<tr align="行的对齐方式" bgcolor="行的背景色" background="背景图片"></tr>
1.2.4 < th >< th/ >
<th><th/>：表示列头，文字会自动加粗、自动居中，是特殊的单元格
| 属性 | 含义 |
|---|---|
| width | 列宽 |
格式：
<th width="列宽"></th>
1.2.5 < tbody >< /tbody >
<tbody></tbody>：语义标签，表示表格的主体部分
1.2.6 < td >< /td >
<td></td>：表示表格中的单元格
| 属性 | 含义 |
|---|---|
| align | 单元格的对齐方式left/center/right |
| valign | 单元格的对齐方式top/bottom |
格式：
<td align="left/center/right" valign="top/bottom"></td>
1.2.7 < caption >< /caption >
<caption></caption>：表示表格的标题
1.3 表格的格式
<!--表格边框1像素，位置在页面居中，背景颜色为橙色，内容到单元格距离为5像素，单元格之间距离为6像素-->
<table border="1" align="center" bgcolor="orange" cellpadding="5" cellspacing="6">
<caption>表格的标题</caption>
<thead><!--表格的头部-->
<tr align="right" bgcolor="pink"><!--这一行中内容靠右对齐，背景颜色为粉色-->
<th width="100">表</th><!--第一个单元格宽为100像素-->
<th>格</th>
<th>列</th>
<th>头</th>
</tr>
</thead>
<tbody><!--表格的主体-->
<tr>
<!--文字靠底部对齐，单元格高度为100像素-->
<td valign="bottom" height="100">表格</td>
<!--单元格宽为100像素，文字靠右对齐，且文字靠顶部对齐-->
<td align="right" width="100" valign="top">中的</td>
<td>单元</td>
<td>格 </td>
</tr>
</tbody>
</table>
1.4 单元格的合并
1.4.1 跨多列（合并列）
一个单元格占据多列，在<td>中添加属性colspan,该属性的值为占据的列数。
<table border="1"><!--表格边框宽度1像素-->
<tr><!--第一行-->
<!--两列单元格合并，且其中文字居中-->
<td colspan="2" align="center">信息</td>
</tr>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
1.4.2 跨多行(合并行)
一个单元格占据多行,在<td>中添加属性rowspan，该属性的值为占据的行数。
<table border="1"><!--表格边框宽度1像素-->
<tr>
<!--两行单元格居中-->
<td rowspan="2">信息</td>
<td>姓名</td>
</tr>
<tr>
<td>年龄</td>
</tr>
</table>
1.5 实例
<!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>手机</title>
</head>
<body>
<!--整个表格框架，单元格之间距离为5-->
<table cellspacing="5">
<!--第一行：左边的手机模型和第一行字-->
<tr>
<!--第一行第一个单元格 手机模型 合并了9行-->
<td rowspan="9">
<!--手机模型表格-->
<table>
<!--第一行手机最大的图片 内容居中-->
<tr align="center">
<!--单元格合并三列，且高度为300像素-->
<td colspan="3" height="300">
<!-- 我的图片存储的路径，根据自己的情况设置 -->
<img src="./imges/dashouji.png">
</td>
</tr>
<!--第二行三个手机小图 内容居中-->
<tr align="center">
<!--第一个单元格放第一个手机图片-->
<td width="150">
<img src="./imges/shouji1.png">
</td>
<!--第二个单元格放第二个手机图片-->
<td width="150">
<img src="./imges/shouji2.png">
</td>
<!--第三个单元格放第三个手机图片-->
<td width="150">
<img src="./imges/shouji3.png">
</td>
</tr>
</table>
</td>
<!--第一行第二个单元格 第一行字 宋体5号 合并5列-->
<th colspan="5" align="left" height="50">
<font face="宋体" size="5">现货送钢化膜Huawei/华为G9青春版plus移动联通全网4G手机</font>
</th>
</tr>
<tr>
<!--第二行 正品裸价 表格中字体左对齐 合并5列-->
<th align="left" colspan="5" height="20">
<!-- 宋体2号粉色字 -->
<font face="宋体" size="2" color="#FF1493">正品裸价 购机送钢化膜 保护壳</font>
</th>
</tr>
<!--第三行 价格 设置粉色背景-->
<tr bgcolor="#FFE1FF">
<!-- 单元格放整个粉色部分 合并5列 -->
<td colspan="5" height="50">
<!-- 拆分成两行三列的表格 -->
<table>
<!--第一行 专柜价 高度20像素 文字靠底部和左部对齐-->
<tr>
<th height="20" valign="bottom" align="left">
<!--宋体灰色2号字-->
<font face="宋体" size="2" color="#B5B5B5">专柜价</font>
</th>
<td width="35">
<!--空单元格，对齐后面的元素-->
</td>
<!--原价1399.00 高度30像素 文字靠底部和左部对齐-->
<th height="20" valign="bottom" align="left">
<!--s标签为删除线标签-->
<font face="宋体" size="2" color="#B5B5B5"><s>￥1399.00</s></font>
</th>
</tr>
<!--第二行 新年价 高度20像素 文字靠顶部和左部对齐-->
<tr>
<th height="20" valign="top" align="left">
<!--宋体灰色2号字-->
<font face="宋体" size="2" color="#FF1493">新年价</font>
</th>
<td width="35">
</td>
<!--现价1199.00 高度20像素 文字靠顶部和左部对齐-->
<th height="20" valign="top" align="left">
<font face="宋体" size="4" color="#FF1493">￥1199.00</font>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<!--第四行 运费 行高30 合并5列-->
<th height="30" align="left" colspan="5">
<font face="宋体" size="2" color="#B5B5B5">运费 </font>
<font face="宋体" size="3">北京至长春 快递：0.00</font>
</th>
</tr>
<tr>
<!--第五行 月销量 合并5列 文字居左对齐-->
<th height="30" align="left" colspan="5">
<font face="宋体" size="2" color="#B5B5B5">月销量 </font>
<font face="宋体" size="2" color="#FF1493">172 | </font>
<font face="宋体" size="2" color="#B5B5B5">累计评价 </font>
<font face="宋体" size="2" color="#FF1493">91 | </font>
<font face="宋体" size="2" color="#B5B5B5">送51购积分 </font>
<font face="宋体" size="2" color="#32CD32">119</font>
</th>
</tr>
<tr>
<!--第六行 网络类型-->
<td height="40" width="100">
<font face="宋体" color="#B5B5B5" size="3">网络类型</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">移动联通双4G</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">移动4G</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">4G全网通</font>
</td>
<td height="40" width="100"></td>
</tr>
<tr>
<!--第七行 机身颜色-->
<td height="40" width="100">
<font face="宋体" color="#B5B5B5" size="3">机身颜色</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">金色</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">黑色</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">白色</font>
</td>
<td height="40" width="100"></td>
</tr>
<tr>
<!--第八行 套餐类型-->
<td height="40" width="100">
<font face="宋体" color="#B5B5B5" size="3">套餐类型</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">官方标配</font>
</td>
<td height="40" width="100"></td>
<td height="40" width="100"></td>
<td height="40" width="100"></td>
</tr>
<tr>
<!--第九行储存容量-->
<td height="40" width="100">
<font face="宋体" color="#B5B5B5" size="3">存储容量</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">16G</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">32G</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">64G</font>
</td>
<td height="40" width="100"></td>
</tr>
</table>
</body>
</html>
标签：1.4,表格,1.2,单元格,HTML,概述,nbsp,属性 来源： https://blog.csdn.net/m0_46612221/article/details/120598159
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。