武汉子格教育科技有限公司

一、网页网站基础结构创建

新建HTML文件

使用记事本或代码编辑器新建文件，制作制作保存为`table.html`（或自定义名称）。表格表格

定义表格标签

在`

```html

```

`border`：设置边框样式（如1表示实线边框）；

`cellspacing`和`cellpadding`：调整单元格间距；

`width`：表格宽度（如100%表示占满父容器）。制作制作

二、表格表格添加表头与主体

创建表头

使用``标签包裹表头单元格，代码通过``标签定义列标题：

```html

姓名

年龄

邮箱

```

可通过CSS设置表头居中（`text-align: center`）和背景色（如`background-color: f2f2f2`）。网页网站

添加表格主体

使用``标签包裹数据行，制作制作通过``定义行，表格表格``定义单元格：

```html

张三

28

zhangsan@example.com

李四

34

lisi@example.com

```

三、代码样式调整与优化

合并单元格

使用`colspan`（列）和`rowspan`（行）属性合并单元格。网页网站例如，制作制作将姓名和年龄合并为一列：

```html

基本信息

张三,表格表格 28岁

```

设置单元格样式

通过内联样式或CSS类调整单元格宽度、高度、边框等：

```html

姓名

```

或使用CSS类：

```css

.name-cell {

width: 200px;

height: 50px;

background-color: e6f7ff;

text-align: center;

}

```

然后在HTML中应用类：

```html

姓名

```

响应式设计

使用百分比宽度或CSS媒体查询实现响应式表格：

```css

table {

width: 100%;

max-width: 800px;

margin: 0 auto;

}

@media (max-width: 600px) {

table, thead, tbody, th, td, tr {

display: block;

}

th {

position: absolute;

top: -9999px;

left: -9999px;

}

tr {

margin-bottom: 1rem;

}

td {

border: 1px solid ccc;

position: relative;

padding-left: 50%;

}

td::before {

content: attr(data-label);

position: absolute;

left: 0;

width: 45%;

padding-right: 15px;

background-color: f2f2f2;

text-align: left;

}

}

```

四、高级功能扩展

添加图片与链接

在单元格内插入图片：

```html

```

添加超链接：

```html

链接文本

```