HTML 表格和边框属性

HTML 表格和边框属性

基本介绍

HTML 表格用于在网页上显示行列数据，由<table>标签定义。

主要标签

• <table>：定义表格

• <tr>：定义表格行

• <td>：定义表格单元格

• <th>：定义表头单元格

• <caption>：定义表格标题

• <thead>：定义表格头部

• <tbody>：定义表格主体

• <tfoot>：定义表格页脚

边框属性

HTML4中常用的边框属性：

• border：设置表格边框宽度

• cellspacing：设置单元格间距

• cellpadding：设置单元格内边距

基本用法示例

<table border="1" cellspacing="0" cellpadding="5">
  <caption>学生成绩表</caption>
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>90</td>
    <td>85</td>
  </tr>
</table>

CSS扩展

现代网页设计推荐使用CSS来控制表格样式：

边框样式

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

斑马条纹效果

tr:nth-child(even) {
  background-color: #f2f2f2;
}

悬停效果

tr:hover {
  background-color: #ddd;
}

响应式表格

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 10px;
  }
  table td {
    display: block;
    text-align: right;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

功能总结

• 数据展示：以行列形式清晰展示数据

• 布局控制：传统网页布局方式之一

• 响应式设计：可通过CSS实现不同设备上的适配

• 可访问性：配合语义化标签提高可访问性