目录
1.表格基础
2.基本使用
一个三行四列的表格
表头添加th设置
3.单元格合并
4.表格分区
1.表格基础
表格三个标签组成：
table：表格，作用是定义一个表格的结构
tr： table rows：定义表格的行
td：table dock：定义表格的单元格
关系：table > tr >td
2.基本使用
一个三行四列的表格
<body>
<table border="1" style="border-collapse:collapse">
<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>
table标签上有两个属性，
-
border="1",用来设置表格的边框，没有这个属性，边框不显示
-
style="border-collapse:collapse"是css样式，作用是合并表格
表头添加th设置
th可以设置表头，可以使用tr>th设置
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
<th>第4列</th>
</tr>
3.单元格合并
一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性
rowspan：上下跨行合并
colspan：左右跨列合并
属性值是数字，数字是几就代表跨几行或跨几列
步骤：
-
确定一行有多少个td，
-
一共有几行（要看最多的有几行），
-
看哪个单元格合并，设置对应属性
<!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>
<style>
table{
}
td{
width: 40px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table border="1" style="border-collapse:collapse">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="3">3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
<td rowspan="2">14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td colspan="2">18</td>
</tr>
</table>
</body>
</html>4.表格分区
一个完整的表格包含三个部分：表格标题，表格表头，表格主体
一个table内部实际还有三个分区标签组成
caption：定义表格标题
thead：定义表格的头部，内部嵌套tr>th
tbody：定义表格的主体,内部嵌套td>td
<!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>
<style>
table{}
th{
width: 120px;
height: 40px;
text-align: center;
}
td{
height: 40px;
}
</style>
</head>
<body>
<table border="1" style="border-collapse:collapse">
<!-- 标题分区 -->
<caption>（标题）各地区资产投资</caption>
<!-- 表头分区 -->
<thead>
<tr>
<th rowspan="2" >地区（表头）</th>
<th colspan="2">按总分量（表头）</th>
<th colspan="2">按比重分（表头）</th>
</tr>
<tr>
<th>自年初累计/亿元（表头）</th>
<th>去年同期增长/% (表头)</th>
<th>自年初累计/亿元（表头）</th>
<th>去年同期增长/% （表头）</th>
</tr>
</thead>
<!-- 主体分区 -->
<tbody>
<tr>
<td>全国</td>
<td>1</td>
<td>100</td>
<td>1</td>
<td>100</td>
</tr>
<tr>
<td>全国</td>
<td>2</td>
<td>100</td>
<td>2</td>
<td>100</td>
</tr>
<tr>
<td>全国</td>
<td>3</td>
<td>100</td>
<td>3</td>
<td>100</td>
</tr>
<tr>
<td>全国</td>
<td>4</td>
<td>100</td>
<td>4</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>