html table简单例子

html table简单例子
（最新版）
目录
1.HTML 表格的基本结构
2.HTML 表格的属性
3.表格的边框和单元格的样式
4.表格的复杂例子
正文
HTML 表格是网页设计中常用的元素，它可以用来展示数据和信息，让用户更直观地理解和阅读。

下面，我们将介绍一个 HTML 表格的简单例子，并详细讲解表格的基本结构、属性、边框和单元格的样式以及复杂例子。

首先，我们来看一个 HTML 表格的基本结构。

一个 HTML 表格由
`<table>`标签包裹，内部包含`<tr>`（表格行）和`<td>`（表格单元格）标签。

下面是一个简单的例子：
```html
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
```
在这个例子中，我们创建了一个包含两行数据的表格。

每一行包含两个单元格，分别是“姓名”和“年龄”。

接下来，我们来介绍一下 HTML 表格的属性。

表格的属性主要用来设置表格的样式和布局。

例如，我们可以通过`border`属性设置表格边框的宽度，通过`cellpadding`和`cellspacing`属性设置单元格的内边距和外边距。

下面是一个设置边框宽度的例子：
```html
<table border="1">
<!-- 其他代码 -->
</table>
```
此外，我们还可以通过`style`属性设置表格的样式。

例如，我们可以设置表格边框的颜色、单元格的背景色和字体颜色等。

下面是一个设置样式的例子：
```html
<table style="border-color:red; background-color:blue;
color:white;">
<!-- 其他代码 -->
</table>
```
除了基本的表格样式，我们还可以通过设置`caption`属性添加表格标题，通过`colgroup`和`col`属性设置表格的列布局，通过`thead`和`tbody`属性设置表格的行布局等。

最后，我们来看一个表格的复杂例子。

在这个例子中，我们将创建一个包含多行数据、复杂布局和样式的表格：
```html
<table style="border-collapse:collapse; width:100%;">
<caption>员工信息表</caption>
<colgroup>
<col style="width:20%; text-align:left;">
<col style="width:20%; text-align:left;">
<col style="width:20%; text-align:left;">
<col style="width:20%; text-align:left;">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>部门</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>软件工程师</td> <td>研发部</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>产品经理</td> <td>产品部</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>UI 设计师</td> <td>设计部</td>
</tr>
</tbody>
</table>
```
在这个例子中，我们设置了表格的标题、列布局、行布局以及单元格的样式。

表格包含多行数据，每行包含四个单元格，分别是姓名、年龄、职位和部门。

通过以上介绍，相信大家已经对 HTML 表格有了更深入的了解。