135 lines
3.2 KiB
Markdown
135 lines
3.2 KiB
Markdown
|
# 表格（table）
|
|||
|
|
|
|||
|
|
表格：由行和列组成的结构化数据集（表格数据）
|
|||
|
|
|
|||
|
|
### 使用场景
|
|||
|
|
|
|||
|
|
html表格应用于展示表格数据，而不是用来实现网页布局
|
|||
|
|
|
|||
|
|
用表格实现网页布局出现的问题：
|
|||
|
|
|
|||
|
|
1. 表格布局减少了视觉受损的用户的可访问性
|
|||
|
|
2. 表格会产生更多的标签，使代码变得更难于编写，维护，调试
|
|||
|
|
3. 表格不能自动响应 正确的布局容器（如div ） 他们的默认宽度是父元素的100% 但表格的默认大小是根据其内容而定的。因此 如果要做移动端适配，就需要采取额外的措施来改变表格的样式
|
|||
|
|
|
|||
|
|
### 新建一个表格
|
|||
|
|
|
|||
|
|
1. 每个表格的内容都被包含在<table></table> 中 而且这些内容需要写在html结构的body部分
|
|||
|
|
2. 在表格中，最小的内容容器是单元格，是通过（td）创建的 这是一列
|
|||
|
|
3. 如果想换行，需要把位于同一行的内容包含在 一个tr 标签中 即用<tr></tr> 定义一行
|
|||
|
|
|
|||
|
|
示例：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<table border="1">
|
|||
|
|
<tr>
|
|||
|
|
<td>姓名</td>
|
|||
|
|
<td>年龄</td>
|
|||
|
|
<td>性别</td>
|
|||
|
|
<td>班级</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>asd</td>
|
|||
|
|
<td>14</td>
|
|||
|
|
<td>男</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>lily</td>
|
|||
|
|
<td>12</td>
|
|||
|
|
<td>女</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>asd</td>
|
|||
|
|
<td>14</td>
|
|||
|
|
<td>男</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>lily</td>
|
|||
|
|
<td>12</td>
|
|||
|
|
<td>女</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
效果如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
上面的代码中出现的 <table border="1"></table> 中的border 用于给表格加上边框
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 表格表头（th）
|
|||
|
|
|
|||
|
|
table包裹的 th标签会有加粗的效果 看起来是表格的表头
|
|||
|
|
|
|||
|
|
把上面表格的顶部四个单元格做成表头效果：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<table border="1">
|
|||
|
|
<tr>
|
|||
|
|
<th>姓名</th>
|
|||
|
|
<th>年龄</th>
|
|||
|
|
<th>性别</th>
|
|||
|
|
<th>班级</th>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>asd</td>
|
|||
|
|
<td>14</td>
|
|||
|
|
<td>男</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>lily</td>
|
|||
|
|
<td>12</td>
|
|||
|
|
<td>女</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>asd</td>
|
|||
|
|
<td>14</td>
|
|||
|
|
<td>男</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>lily</td>
|
|||
|
|
<td>12</td>
|
|||
|
|
<td>女</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 允许单元格跨行或列
|
|||
|
|
|
|||
|
|
|
|||
|
|
|