参考资料

1. HTML id 属性在 JavaScript 中的使用
2. http-equiv="expires" 模拟 HTTP 头部中的 Expires 字段
3. HTML 文字方向格式化
4. HTML 音频(Audio)
5. HTML 中最常用的<div>容器元素
6. html元信息标签详细说明以及案例
7. Html转义工具有哪些
8. HTML <cite>用于著作标题的

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实现不同设备上的适配

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。