表 - Html

简介

在 HTML 中，表格有两个基本要素：行（tr）和单元格（td）。行是表格数据的主要内容，每一行都由一个或多个单元格组成。单元格是行的组成部分，它包含了具体的数据或内容。

基本结构

表格是由 table 元素包裹，行使用 tr 元素表示，单元格使用 td 元素表示。而表头通常使用 th 元素表示。

以下为基本结构示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
    <td>女</td>
  </tr>
</table>

属性

table 元素的主要属性：

• border：表格边框宽度；
• cellpadding：单元格内部空间；
• cellspacing：单元格之间的间距。

th 和 td 的主要属性：

• rowspan：单元格跨行，值为跨越的行数；
• colspan：单元格跨列，值为跨越的列数。

样式

表格的样式可以通过 css 样式进行设置。常用的样式属性有：

• border：单元格边框；
• background-color：单元格背景颜色；
• color：单元格文字颜色；
• text-align：文本对齐方式；
• font-size：字体大小；
• etc.

响应式表格

在移动端，表格展示通常不太友好。为了解决这个问题，可以使用响应式表格。响应式表格会根据屏幕宽度自动适应不同的展示方式。

以下是响应式表格的基本结构：

<div class="table-wrapper">
  <table>
    <tr>
      <th>姓名</th>
      <td>张三</td>
    </tr>
    <tr>
      <th>年龄</th>
      <td>20</td>
    </tr>
    <tr>
      <th>性别</th>
      <td>男</td>
    </tr>
  </table>
</div>

以下是响应式表格的 css 样式：

.table-wrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  padding: 0.5rem;
  border: 1px solid #ccc;
  text-align: left;
}
@media all and (max-width: 767px) {
  table, tr, td {
    display: block;
  }
  td:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 50%;
    white-space: nowrap;
    text-align: left;
  }
  td:nth-child(2) {
    margin-top: 1.5rem;
  }
}

总结

以上为表 - Html 的简单介绍。表格是网页中经常使用的内容展示方式之一，掌握表格的基本结构和属性，以及一些样式技巧，可以让开发效果更佳。