使用HTML开发商业网站
创建表格
表格
什么是表格？
表格
说到表格，其实大家并不陌生
课程表
歌曲排行榜
查票
表格
定义一个表格
定义表格中的一行，嵌套在<table></table>中
定义表格中的单元格，嵌套在<tr></tr>中
创建table表格，离不开以下3对标签:
表格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格
</title>
</head>
<body>
.......
</body>
</html>
<table border="1">
<tr>
<td>品牌</td>
<td>型号</td>
<td>颜色</td>
</tr>
<tr>
<td>华为</td>
<td>mate40pro</td>
<td>亮黑色</td>
</tr>
<tr>
<td>OPPO</td>
<td>Reno5 Pro</td>
<td>秘银色</td>
</tr>
<tr>
<td>小米</td>
<td>11 5G游戏手机</td>
<td>蓝色</td>
</tr>
</table>
表格
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，其中表格是构建页面内容和结构的重要组成部分。在商业网站开发中，表格常用于展示数据、比较产品特性或组织信息。本课件将深入讲解如何使用HTML来创建表格。
我们要了解表格的基本构成。表格在HTML中由`<table>`元素定义，它包含了表格的所有行和单元格。一个简单的表格结构如下：
```html
<table>
...
</table>
```
表格的每一行由`<tr>`（table row）元素定义，它包含了一个或多个单元格`<td>`（table data cell）或者表头单元格`<th>`（table header cell）。例如：
```html
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
```
在提供的示例中，可以看到一个具有三行的表格，展示了不同手机品牌、型号和颜色的信息。具体代码如下：
```html
<table border="1">
<tr>
<td>品牌</td>
<td>型号</td>
<td>颜色</td>
</tr>
<tr>
<td>华为</td>
<td>mate40pro</td>
<td>亮黑色</td>
</tr>
<tr>
<td>OPPO</td>
<td>Reno5 Pro</td>
<td>秘银色</td>
</tr>
<tr>
<td>小米</td>
<td>11 5G游戏手机</td>
<td>蓝色</td>
</tr>
</table>
```
在这个例子中，`<table border="1">`设置边框为1，使得表格有明显的边界。`<tr>`元素定义了表格的行，每行内的`<td>`元素则表示单元格，分别填充了品牌、型号和颜色的数据。
表格还可以包含表头，表头单元格`<th>`通常用于显示列的标题。它们与`<td>`相似，但通常以粗体和居中显示。例如：
```html
<tr>
<th>品牌</th>
<th>型号</th>
<th>颜色</th>
</tr>
```
此外，表格可以使用`<colgroup>`和`<col>`元素来指定列的样式，`<tfoot>`和`<thead>`元素分别定义表格的页脚和页头。`<tbody>`元素则用于包裹表格的主要数据部分。
表格的其他属性，如`border`, `cellpadding`, `cellspacing`, `width`, 和 `height`，可以用来调整表格的外观。现代网页设计更倾向于使用CSS来控制样式，而不是在HTML中直接设置这些属性。
HTML表格是呈现结构化数据的有效方式，尤其在商业网站中，它们可以帮助用户快速理解和比较信息。通过熟练掌握表格的创建和布局，开发者能够创建出更加直观和实用的网页。在实际应用中，要根据需求合理地运用表格，并结合CSS进行美化，以提升用户体验。
