HTML学习:表格
表格基础
三个标签:table,tr,td
table作用:定义了一个表格的结构
table中有两个属性:
- 第一个属性:border=“1” 控制表格边框 如果没有就不显示边框
- 第二个属性:style="border-collapse:collapse"是css样式,作用就是合并表格
tr作用:定义了表格的行(一个tr代表了一行)
td作用:定义了表格的单元格
关系:table里嵌套tr,tr里嵌套td(table>tr>td)
<body>
<!-- 表格的基本使用 -->
<table border="1">
<!-- border="1" 添加边框 出来的效果是一种边框嵌套的感觉 -->
<!-- border="1" style=border-collapse:collapse 边框就合并成了一个-->
<!-- 快捷键 tr>td*4 -->
<tr>
<td>第1行,第1列</td>
<td>第1行,第2列</td>
<td>第1行,第3列</td>
<td>第1行,第4列</td>
</tr>
<tr>
<td>第2行,第1列</td>
<td>第2行,第2列</td>
<td>第2行,第3列</td>
<td>第2行,第4列</td>
</tr>
<tr>
<td>第3行,第1列</td>
<td>第3行,第2列</td>
<td>第3行,第3列</td>
<td>第3行,第4列</td>
</tr>
</table>
</body>
table border=“1” 展示:
table border=“1” style=border-collapse:collapse 展示
如果想要设置表头,可以使用tr>th
<tr>
<!-- 设置表头 默认为加粗字体 -->
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
<th>第4列</th>
</tr>
单元格合并
一部分单元格需要进行跨行跨列合并,可以给对应的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>
</head>
<style>
table{
}
td{
width: 80px;
height: 60px;
text-align: center;
}
</style>
<body>
<table border="1" style="border-collapse: collapse;">
<!-- rowspan: 上下跨行合并
colspan:左右跨列合并 -->
<!-- 先看第一行 共四个 -->
<!-- 跨列左右看 跨行上下看 -->
<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>