地 址：联系地址联系地址联系地址
电 话：020-123456789
网址：330400.com
邮 箱：admin@aa.com
一、网页网站基础结构创建
新建HTML文件
使用记事本或代码编辑器新建文件，制作制作保存为`table.html`（或自定义名称）。表格表格
定义表格标签
在`
```
`border`：设置边框样式（如1表示实线边框）；
`cellspacing`和`cellpadding`：调整单元格间距；
`width`：表格宽度（如100%表示占满父容器）。制作制作
二、表格表格添加表头与主体
创建表头
使用``标签包裹表头单元格，代码通过` ```html ``` 可通过CSS设置表头居中（`text-align: center`）和背景色（如`background-color: f2f2f2`）。网页网站 添加表格主体 使用``标签定义列标题： 姓名 年龄 邮箱
```html
```
三、代码样式调整与优化
合并单元格
使用`colspan`（列）和`rowspan`（行）属性合并单元格。网页网站例如，制作制作将姓名和年龄合并为一列：
```html
```
设置单元格样式
通过内联样式或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
```
