欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

如何在HTML中为表格添加边框线

最编程 2024-08-08 08:11:52
...

要在 HTML 表格中设置边框线，你可以使用 CSS 样式来定义表格的外观。

下面是一些设置表格边框线的 CSS 样式：

  1. 设置表格的边框线宽度、样式和颜色：
table {
  border: 1px solid black;
}

这将在表格周围创建一条宽度为 1 像素的黑色实线边框。

  1. 设置表格单元格的边框线宽度、样式和颜色：
table td {
  border: 1px solid black;
}

这将在每个单元格周围创建一条宽度为 1 像素的黑色实线边框。

  1. 设置表格的边框线和单元格之间的间距：
table {
  border-collapse: collapse;
  border-spacing: 0;
}

这将使表格的边框线和单元格之间的间距减小到 0。

注意：以上样式仅为示例，你可以根据自己的需求进行更改。

示例代码：

<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
  border: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>30</td>
    <td>广州</td>
  </tr>
</table>

希望这能帮助到你。

上一篇： 表格边框样式怎么设定？

下一篇： CSS边框倒角

推荐阅读