参考资料

1. Html表格生成器有哪些
2. Html过滤工具有哪些
3. HTML 段落
4. HTML 表单详解
5. HTML 多媒体
6. HTML "计算机输出"标记
7. HTML id 属性在 JavaScript 中的使用
8. HTML 区块元素

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

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