zh/html_css_blog/tutorials/html-tables

🎯 HTML表格基础教程

HTML表格是网页布局中常用的数据展示工具，通过<table>标签可以创建结构清晰的表格。以下是关键知识点：

📌 表格基本结构

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

💡 属性说明：

• border="1"：设置边框宽度（已过时，建议用CSS）
• align="center"：对齐方式（left/right/center）
• cellpadding="5"：单元格内边距
• cellspacing="2"：单元格间距

🎨 样式美化技巧

使用CSS实现更灵活的样式：

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px 12px;
}
th {
  background-color: #f2f2f2;
}

🖼️ 可插入图片：<img src="https://cloud-image.ullrai.com/q/html_table_structure/" alt="表格结构示意图"/>

📚 实战案例

1. 简单表格

   <table border="1">
     <tr><th>姓名</th><th>年龄</th></tr>
     <tr><td>张三</td><td>25</td></tr>
   </table>
   

2. 合并单元格

   <table>
     <tr>
       <th rowspan="2">项目</th>
       <th>预算</th>
       <th>实际</th>
     </tr>
     <tr>
       <td>¥1000</td>
       <td>¥950</td>
     </tr>
   </table>
   

🖼️ 可插入图片：<img src="https://cloud-image.ullrai.com/q/html_table_example/" alt="表格示例"/>

📖 延伸学习

想了解更多CSS表格样式技巧？👉 HTML表格样式指南
或探索响应式表格设计方案