表格的作用html

表格的作用

之前，web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难，现在已经被DIV+CSS布局所取代。

现在，用于显示、展示数据。(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)

**注意：**现在HTML表格应该用于展现表格数据，而不是用来实现网页布局！

### 3、表格基本标签

- table

- 语法: <table></table>

- 作用:定义表格

- tr

- 语法: <tr></tr>

- 作用:定义表格中的行

- td

- 语法: <td></td>

- 作用：定义表格数据（table data）

单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

- 默认样式:内容水平居左，垂直居中

- th

- 语法:<th></th>

- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型

- 默认样式：字体加粗，内容水平居中，垂直居中

表格基本结构如下:

```html

<table>

<tr>

<td>姓名</td>

<td>年龄</td>

</tr>

<tr>

<td>张三</td>

<td>18岁</td>

</tr>

<tr>

<td>王五</td>

<td>12岁</td>

</tr>

</table>

```

### 4、表格常用属性

#### 4.1 table属性

**语法:**

```html

<table width="1000" height="500" border="1" cellpadding="0" cellspacing="0">

```

- width\height

- 作用：定义表格的宽或高

- 注：省略单位 默认px

- border

- 作用：使用表格的边框属性可以显示一个带有边框的表格。

- 注意：如果不定义边框属性，表格将不显示边框。

- cellpadding

- 作用：定义单元格中内容和边框之间的间距

- cellspacing

- 作用：单元格和单元格之间的间距

#### 4.2 td，th属性

**语法：**

```html

<td width="100" height="100" align="center" valign="middle">

```

- width\height

- 作用：定义单元格宽度、高度

- 注意：省略单位 默认px

- align

- 作用：单元格水平方向的对齐方式

- 取值

- left左对齐

- center 居中对齐

- right 右对齐

- valign

- 作用：单元格垂直方向的对齐方式

- 取值

- top顶对齐

- middle居中对齐

- bottom底部对齐

### 5. 表格结构标签

- caption

- 语法：<caption></caption>

- 作用：定义表格的标题

- 默认样式：居中于表格之上

- 注意：

caption 标签必须紧随 table 标签之后

- thead

- 语法:<thead></thead>

- 作用:用于组合 HTML 表格的表头内容

- tbody

- 语法:<thead></thead>

- 作用:用于组合 HTML 表格的主体内容

- 提示：一个表格允许包含多个<tbody>

- tfoot

- 语法：<tfoot></tfoot>

- 作用：用于组合 HTML 表格的页脚内容

- 总结

- 每个表格只能定义一个标题<caption>

- thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody

### 6. 合并单元格

- rowspan

- 作用：跨行合并

语法：

```html

<td rowspan="2"> 电话 </td>

```

- colspan

- 作用：跨列合并

语法：

```html

<td rowspan="2"> 电话 </td>

```

- 操作步骤

1. 确定是合并行还是合并列

2. 找到目标单元格，添加合并属性如：<td rowspan="2"> 电话 </td>

3. 删除多余单元格

### 7. 表格总结

- 未定宽度的表格、单元格适应内容

- 同一行只识别一个高，取最大值

- 同一列只识别一个宽，取最大值

- 表格可以包含其他HTML标签以及表格