1.表格的基本使用
表格：Table键
表格长度 边框粗细
<table width="1000" border="5"><tr>（行）
<td></td>（列）
<th></th> (加粗列)
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
表格的使用
HTML中提供的表格标签：
table 表格框架
tr 行标签
td 单元格标签
-->
<!-- 需求：5行4列的表格 -->
<!--
表格的属性
border 边框 0 隐藏 1显示 >1 控制粗细
width|height 宽度 高度
bgcolor 背景颜色
cellspacing 控制单元格与单元格之间的间距
cellpadding 内填充（单元格的边框与文本的间距）
align 水平对齐 left center right
valign 垂直居中 top middle bottom
background 背景 图片 设置
-->
<table borderColor = "red" background = "imgs\\刘亦菲.jpg" align="center" border="1" width="70%" height = "800" cellspacing="0" cellpadding="0">
<!-- 第一行 -->
<tr align="center" valign="top">
<td>第1行第1个单元格</td>
<td>第1行第2个单元格</td>
<td>第1行第3个单元格</td>
<td>第1行第4个单元格</td>
</tr>
<tr bgcolor="red" style = "color: yellow;">
<td>第2行第1个单元格</td>
<td>第2行第2个单元格</td>
<td>第2行第3个单元格</td>
<td>第2行第4个单元格</td>
</tr>
<tr>
<td bgcolor="blue">第1行第1个单元格</td>
<td>第1行第2个单元格</td>
<td>第1行第3个单元格</td>
<td>第1行第4个单元格</td>
</tr>
<tr>
<td>第1行第1个单元格</td>
<td>第1行第2个单元格</td>
<td>第1行第3个单元格</td>
<td>第1行第4个单元格</td>
</tr>
<tr>
<td>第1行第1个单元格</td>
<td>第1行第2个单元格</td>
<td>第1行第3个单元格</td>
<td>第1行第4个单元格</td>
</tr>
</table>
</body>
</html>2.表格标签的使用 标题表头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table标签中的其他子标签使用
另类单元格标签 th
特点：自动加粗+自动居中
作用：作用在表头
captin标签
设置表格的标题
thead|tbody|tfoot
HTML中将表格可以分为三个等分
-->
<table align="center" border = "1" width="400">
<caption><h2>学员信息表</h2></caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>xxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</tfoot>
</table>
</body>
</html>3.表格的跨行与跨列 （就是合并单元格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1.表格的跨行与跨列
colspan|rowspan 针对的是单元格
rowspan 跨行
colspan 跨列
算上本身
-->
<table width="50%" border="1">
<tr>
<td colspan="3">item1</td>
<!-- <td>item2</td>
<td>item3</td> -->
</tr>
<tr>
<td>item1</td>
<td rowspan = "2">item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<!-- <td>item2</td> -->
<td>item3</td>
</tr>
</table>
</body>
</html>4.表格中嵌套表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
嵌套的表
<table border="1" width="100%">
<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>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>5.表格表单的嵌套使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body bgcolor="pink">
<form action="#" method = "post" >
<table border="0"align = "center">
<caption><h3>用户登录</h3></caption>
<tr>
<td>账号</td>
<td><input type="text" placeholder="输入账号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password"></td>
</tr>
<tr align="center">
<td colspan = "2">
<input type="submit" value = "登录">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>