02-HTML表格
第1章 基础表格
基本语法
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1">
<tr>
<td>上午</td>
<td>下午</td>
</tr>
<tr>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>数字</td>
<td>历史</td>
</tr>
</table>
</body>
</html>
第2章 表格操作
2-1 表格操作
添加行或删除行，只需要对一整行的内容进行添加或删除，即对一个<tr></tr>进行删除或添加<tr></tr>
同理，添加列或删除列，只需要在每一行的相对位置去添加单元格和删除单元格，即对每一个<tr></tr>的相同位置添加<td></td>或删除
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1">
<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>
<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. 带表头的表格
2. 带标题的表格
3.带结构的表格
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1">
<caption>课程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<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>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</table>
</body>
</html>
2-3 表格属性
1. <table>表格属性
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1" width="500" bgcolor="pink" cellspacing="5" cellpadding="10" frame="vsides" rules="rows">
<caption>课程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<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>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</table>
</body>
</html>
2. <tr>标签属性
3. <td>和<th>标签属性
4. <thead>、<tbody>和<tfoot>标签属性
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1" width="500" align="center" cellspacing="0" cellpadding="5">
<caption>课程表</caption>
<thead align="center" >
<tr bgcolor="pink">
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody align="center" >
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td bgcolor="pink">语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>课间活动</td>
<td bgcolor="pink">课间活动</td>
<td>课间活动</td>
<td>课间活动</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td bgcolor="pink">英语</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td bgcolor="pink">生物</td>
</tr>
</tbody>
</table>
</body>
</html>
4. 表格跨行列
1. 跨列属性colspan
2. 跨行属性rowspan
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1" width="500" cellspacing="0">
<caption>课程表</caption>
<thead align="center">
<tr bgcolor="pink">
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td rowspan="2">语文</td>
<td>数学</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>数学</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td colspan="5">课间活动</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
</tr>
</tbody>
</table>
</body>
</html>
5. 表格嵌套
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1" width="500" cellspacing="0">
<caption>课程表</caption>
<thead align="center">
<tr bgcolor="orange">
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td rowspan="2">语文</td>
<td>数学</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>数学</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td colspan="5">课间活动</td>
</tr>
<tr>
<td rowspan="2">
<table border="1" cellspacing="0">
<tr>
<td>前半节</td>
<td>后半节</td>
</tr>
<tr>
<td>诗词</td>
<td>古文</td>
</tr>
</table>
</td>
<td>数学</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>数学</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
</tr>
</tbody>
</table>
</body>
</html>
第3章 表格布局
效果图
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table width="100%" align="center">
<tr bgcolor="pink" height="80px">
<td></td>
</tr>
<tr height="10px">
<td></td>
</tr>
<tr bgcolor="orange">
<td>
<table align="center">
<tr>
<td width="240px" bgcolor="white"></td>
<td width="20px"></td>
<td width="764px" bgcolor="white"></td>
</tr>
</table>
</td>
</tr>
<tr height="10px">
<td></td>
</tr>
<tr bgcolor="black" height="80px">
<td></td>
</tr>
</table>
</body>
</html>
来源：CSDN
作者：dqh_zsh
链接：https://blog.csdn.net/qq_43405634/article/details/103830980