HTML表格制作学习笔记

一、表格基本结构

<table>
  <tr>                <!-- 表格行 -->
    <th>标题1</th>     <!-- 表头单元格 -->
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>    <!-- 标准单元格 -->
    <td>数据2</td>
  </tr>
</table>

• <table>：表格容器

• <tr>：表格行（Table Row）

• <th>：表头单元格（Header Cell），自动加粗居中

• <td>：数据单元格（Table Data）

二、表格常用属性

1. 尺寸控制

属性	说明	示例值	推荐替代CSS
width	表格宽度	500 / 100%	width: 100%
height	表格高度	300	height: 200px

<table width="80%" height="150">

2. 单元格间距

属性	说明	取值范围	推荐替代CSS
cellpadding	内容与边框间距	0-10	padding: 5px
cellspacing	单元格之间的间距	0-10	border-spacing: 5px

<table cellpadding="8" cellspacing="5">

三、高级表格功能

1. 添加表格标题

<table>
  <caption>2023销售报表</caption> <!-- 必须紧接<table>之后 -->
  <!-- 表格内容 -->
</table>

2. 单元格合并

属性	说明	示例
rowspan	垂直合并单元格	<td rowspan="2">
colspan	水平合并单元格	<th colspan="3">

合并示例：

<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B</td>
  </tr>
  <tr>
    <td colspan="2">C</td>
  </tr>
</table>

四、综合案例

<table width="90%" height="180" cellpadding="6" cellspacing="8">
  <caption>员工信息表</caption>
  <tr>
    <th>姓名</th>
    <th>部门</th>
    <th>工龄</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>技术部</td>
    <td>5年</td>
  </tr>
  <tr>
    <td colspan="2">2023年度优秀员工</td>
  </tr>
</table>

五、注意事项

1. <caption>标签必须作为<table>的第一个子元素

2. 合并单元格时需要调整后续单元格数量

3. 现代开发推荐使用CSS替代表格属性：

   table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 10px;
   }
   td {
     padding: 10px;
   }

六、总结

通过组合使用表格标签和属性，可以创建复杂的表格结构。建议：

1. 先绘制表格草图

2. 从上到下逐行构建

3. 优先使用CSS进行样式控制

4. 合理使用合并功能保持表格结构清晰