在HTML中，`<table>`元素是用于创建表格的关键标签，它允许我们组织数据并以结构化的方式展示。本文将深入探讨HTML中的表格样式，包括基本语法、样式控制以及一些高级技巧。
一个基本的表格由多个部分组成，如`<table>`, `<tr>`, `<th>`, `<td>`等。`<table>`定义了整个表格，`<tr>`表示表格行，`<th>`是表头单元格，而`<td>`则是数据单元格。例如：
```html
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
```
在CSS中，我们可以使用选择器来控制表格的样式。例如，为所有表格添加边框：
```css
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
```
`border-collapse: collapse;`使得相邻单元格的边框合并，而`border`属性为单元格添加边框，`padding`设置内部间距。
表头单元格`<th>`可以有默认的加粗字体和中心对齐，但可以通过CSS调整：
```css
th {
font-weight: bold;
text-align: center;
}
```
表格还可以通过`<colgroup>`和`<col>`标签对列进行样式控制，或者通过`<tbody>`、`<tfoot>`和`<thead>`分别定义表格主体、页脚和头部。
对于复杂的表格布局，可以使用`<tr>`、`<td>`的`colspan`和`rowspan`属性来合并单元格。例如：
```html
<tr>
<td colspan="2">合并两列</td>
</tr>
<tr>
<td rowspan="2">跨越两行</td>
<td>普通单元格</td>
</tr>
```
HTML5引入了一些新的表格属性，如`headers`和`scope`，它们提供了更好的语义化和可访问性。`headers`用于关联单元格和表头，`scope`则指定表头的范围。
```html
<thead>
<tr>
<th id="nameHeader" scope="col">姓名</th>
<th id="ageHeader" scope="col">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="nameHeader">张三</td>
<td headers="ageHeader">25</td>
</tr>
</tbody>
```
此外，响应式设计是现代网页开发的重要组成部分，对于表格，可以使用媒体查询或`display: table-cell`/`display: block`切换来实现不同屏幕尺寸下的适配。
`<caption>`标签用于添加表格标题，而`<tfoot>`则用于定义表格底部的汇总行。这些元素可以增强表格的可读性和理解性。
在实践中，可以利用`TAB.HTML`和`table.html`这两个文件进行实例研究，观察和修改不同的样式属性，以更好地理解和掌握HTML表格的样式设计。记住，不断实践和探索是提升HTML和CSS技能的关键。
css_div.rar （2个子文件） 
TAB.HTML 5KB
