表格样式html

HTML（超文本标记语言）是构建网页和网页应用的标准标记语言。在HTML中创建表格样式是一个常见的需求，因为表格用于展示数据，使信息组织有序且易于阅读。以下是一些基本的HTML表格样式设计方法。

创建基本表格

在HTML中，

标签用来创建表格，代表行（table row），

代表单元格（table data），而

代表表头单元格（table header）。以下是一个基本表格的例子：


  
    标题1
    标题2
    标题3
  
  
    数据1
    数据2
    数据3

表格边框

默认情况下，HTML表格可能没有边框。要添加边框，可以使用CSS的border属性：

table {
  border-collapse: collapse; /* 使边框合并为一个单一的边框 */
  border: 1px solid black; /* 添加边框 */
}

单元格间距

单元格之间的间距可以通过CSS的padding属性来调整：

td, th {
  padding: 8px; /* 单元格内边距 */
}

交替行颜色

为了提高表格的可读性，通常给交替的行设置不同的背景色。这可以通过CSS的伪类:nth-child来实现：

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行背景色 */
}
tr:nth-child(odd) {
  background-color: #ffffff; /* 奇数行背景色 */
}

表头样式

表头通常需要与其它行区分开来，可以通过设置背景色和字体加粗来实现：

th {
  background-color: #4CAF50; /* 表头背景色 */
  color: white; /* 文字颜色 */
  font-weight: bold; /* 字体加粗 */
}

列宽和对齐

列宽可以通过CSS的width属性设置，对齐则可以通过text-align属性控制：

td, th {
  width: 200px; /* 设置列宽 */
  text-align: left; /* 文本左对齐 */
}

响应式表格

在移动设备上，表格可能需要不同的布局。可以使用CSS媒体查询来为不同屏幕尺寸设计不同的样式：

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