一、表格的应用与创建
1、表格标签的语法格式
table是表格标签，tr是一行，td是一个单元格
二、tabel表格标签属性
1、table表格标签的基础属性
第一、width属性：定义表格的宽度，宽度有两种情况：一种是精确值，比如500，不会随着浏览器的缩减或增大而改变表格大小；二种是百分比，例如50%，会随着浏览器的缩减或增大而改变表格大小
第二、border属性：规定围绕表格的边框宽度
第三、cellspacing属性：规定单元格之间的距离（间距）
第四、cellpadding属性：规定单元格边沿与其内容之间的空白
2、table表格标签的其他属性
第一、align属性：规定表格相对周围元素的对齐方式，分别有left、center、right三个值，主要针对整个表格
第二、bgcolor属性：规定表格的背景颜色
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</body>
</html>三、Tr标签属性
1、tr标签的属性和值
tr标签是table表格标签的行标签，下面介绍tr标签属性
第一、align属性：定义表格行的内容水平对齐方式，分别有left、center、right三个值，主要针对表格内容
第二、valign属性：规定表格行中内容的垂直对齐方式，分别有top（顶端）、middle（居中）、bottom（底端）、baseline（基线，针对大小不同的字体统一于底部进行对齐），主要针对表格内容
第三、width属性：规定表格单元格的宽度
第四、height属性：规定表格单元格的高度
第五、colspan属性：规定单元格可横跨的列数
第六、rowspan属性：规定单元格可横跨的行数
四、td标签属性
1、td标签的属性和值
第一、width规定表格单元格的宽度
第二、height规定表格单元格的高度
第三、colspan规定单元格可横跨的列数
第四、rowspan规定单元格可横跨的行数
<!DOCTYPE html>
<html>
<head>
<title>表格标签其他属性</title>
</head>
<body>
<!-- table标签属性 -->
<table border="1" cellpadding="0" cellspacing="0" width="500" align="center" bgcolor="#CCC">
<!-- tr标签属性 -->
<tr align="center" valign="top" height="40" bgcolor="green">
<!-- td标签属性 -->
<td width="300" bgcolor="red">1</td>
<td height="100">2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<!-- 在表格中插入图片 -->
<td><img src="img_01.jpg"></td>
</tr>
<tr>
<!-- 列合并 -->
<td colspan="2">a</td>
<!-- 行合并 -->
<td rowspan="2">c</td>
</tr>
<tr>
<td>s</td>
<td>d</td>
</tr>
</table>
</body>
</html>
五、细线表格的做法
普通表格与细线表格
因为在table中的边框设置为1时，单元格的左右两边都有间距，所以最少都是两个像素，显示出来就不是细线表格边框，而细线表格边框是一像素的，下面介绍细线表格一像素做法
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>一般表格与细线表格</title>
</head>
<body>
<div><h3>以下是一般表格</h3></div>
<div>
<table border="1" width="500" cellspacing="0">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</div>
<div><h3>以下是细线表格</h3></div>
<div>
<!--细线边框做法:
给定tabel背景为黑色并将间隔像素设置为1，然后每个tr再把背景设置为白色 -->
<table width="500" bgcolor="#333" cellspacing="1">
<tr bgcolor="#fff">
<!-- 在做内容时一定要加宽度，保证每个单元格宽度一致 -->
<td width="100">1</td>
<td width="100">2</td>
<td width="100">3</td>
</tr>
</table>
</div>
</body>
</html>
六、表格的其他标签
1、表格的其他标签
第一、<th> 标签定义 HTML 表格中的表头单元格，就是表头，相当于标题的作用
第二、<caption> 标签定义表格的标题，并不包含在表格当中
第三、<thead> 标签用于组合 HTML 表格的表头内容
第四、<tbody> 标签用于组合 HTML 表格的主体内容
第五、<tfoot> 标签用于组合 HTML 表格的页脚内容
书写内容是先写thead在写tfoot在写tbody，显示时会划分区域，最上方是thead、往下依次是tbody和tfoot，不会根据html代码中的thead、tbody、tfoot的顺序来绝对显示顺序
如果需要进行复杂的表格搭建，可以在table当中嵌套table
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>其他标签</title>
</head>
<body>
<table border="1" width="500">
<!-- thead用于组合 HTML 表格的表头内容 -->
<thead>
<!-- 以下是表格的标题 -->
<caption>课程表</caption>
<tr>
<!-- 以下是单元格表头，相当于列标题 -->
<th>head-1</th>
<th>head-2</th>
<th>head-3</th>
<th>head-4</th>
<th>head-5</th>
</tr>
</thead>
<!-- tfoot用于组合 HTML 表格的页脚内容 -->
<tfoot>
<tr>
<td>tfoot-1</td>
<td>tfoot-2</td>
<td>tfoot-3</td>
<td>tfoot-4</td>
<td>tfoot-5</td>
</tr>
</tfoot>
<!-- tbody用于组合 HTML 表格的主体内容 -->
<tbody>
<tr>
<td>tbody-1</td>
<td>tbody-2</td>
<td>tbody-3</td>
<td>tbody-4</td>
<td>tbody-5</td>
</tr>
<tr>
<td>tbody-6</td>
<td>tbody-7</td>
<td>tbody-8</td>
<td>tbody-9</td>
<td>tbody-10</td>
</tr>
</tbody>
</table>
</body>
</html>
七、利用表格标签制作购物图标表格（类似京东）
利用表格标签制作购物图标表格，点击表格内图片，可以打开对应的商品页面，以下是效果图：
以下是html代码：
<!DOCTYPE html>
<html>
<head>
<title>京东排版</title>
</head>
<body>
<!-- 京东表格排版 -->
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#aaa" width="600" align="center">
<!-- 标题 -->
<tr bgcolor="#fff" height="240">
<!-- 表格商品1 -->
<td colspan="2"><a href="https://item.jd.com/7408023.html" target="_blank"><img src="images/tu1.jpg" /></a></td>
<!-- 表格商品2 -->
<td><a href="https://item.jd.com/32782291733.html" target="_blank"><img src="images/tu2.jpg" /></a></td>
</tr>
<tr bgcolor="#fff" height="150">
<!-- 表格商品3 -->
<td><a href="https://item.jd.com/32837978346.html" target="_blank"><img src="images/tu3.jpg" /></a></td>
<!-- 表格商品4 -->
<td><a href="https://item.jd.com/18013636497.html" target="_blank"><img src="images/tu4.jpg" /></a></td>
<!-- 表格商品5 -->
<td><a href="https://item.jd.com/5066434.html" target="_blank"><img src="images/tu5.jpg" /></a></td>
</tr>
</table>
</body>
</html>