HTML table行距的改变方法示例

在过去的网站前端设计中，HTML table是一种常见的布局方法。表格的行距与列距都由HTML的默认属性决定，具体的说，就是说每一行之间存在一定的行距，而且除了设置td、th和tr的padding和margin属性之外，我们这里无法通过CSS来设置。但是，在实际设计中，我们经常需要自定义表格的行距，那么如何实现呢？

什么是HTML table

HTML table是一种非常常见的网站布局方式，通常用于展示数据或者内容。举个例子，比如说在一个电商网站中，我们可能需要通过HTML table来展示商品的属性和价格。

表格中的每一行包括多个单元格，每个单元格可以容纳文字、图片、链接等元素。

HTML table的默认行距

在HTML table中，每一行之间默认存在一定的行距，这个距离无法通过CSS来控制。如果我们想要让表格的行距更加紧凑一些，该怎么做呢？

方法一：通过CSS来调整表格的边框

在CSS中，我们可以通过控制表格的边框宽度和颜色来实现行距的调整。通过增加表格的边框宽度，我们可以让表格变得更加紧凑，而通过减小边框宽度，我们可以让表格之间的距离更加明显。

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}
td {
  text-align: center;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

在上述代码中，我们增加了table的border属性，将其设置为1px，这样表格的边框就变得更加明显了。

方法二：通过CSS来控制表格的单元格间距

在实际的设计中，有时候我们需要让表格单元格之间的距离更加明显。这个时候，我们可以通过CSS的border-spacing属性来实现。具体来说，我们可以利用border-spacing属性来设置单元格之间的距离大小。

table {
  border-collapse: separate;
  border-spacing: 10px 5px;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}
td {
  text-align: center;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

在上述代码中，我们将table的border-collapse属性设置为separate，将border-spacing属性设置为10px 5px，这样就可以实现单元格之间的距离不同。

总结

在实际的网站布局中，表格是一种非常常见的布局方式，但是表格的默认样式可能不能满足我们的设计需求。通过本文中提供的两种方法，我们可以通过CSS来实现表格样式的调整，包括行距和单元格间距等。