HTML/CSS 带边框线的表格

在本文中，我们将介绍如何使用HTML和CSS创建一个带边框线的表格。

阅读更多：HTML 教程

什么是HTML表格？

HTML表格是一个由行和列组成的网格，用于展示和组织数据。表格由table标签定义，行由tr标签定义，单元格由td标签定义。

如何创建一个简单的表格？

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

上面的代码创建了一个包含两行三列的简单表格。每个单元格都用td标签包裹起来，tr标签定义了每一行。

添加表格边框线

要为表格添加边框线，可以使用CSS样式。通过设置table和td的border属性，可以控制边框线的样式、宽度和颜色。

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 8px;
}

上面的代码中，我们使用了border-collapse属性将表格边框合并为一个单一的边框。td元素的border属性用于设置边框线的样式，1px solid black表示边框线宽度为1像素，样式为实线，颜色为黑色。padding属性用于设置单元格的内边距，增加单元格内容与边框之间的间距。

添加行和列的背景颜色

要为表格的行或列添加背景颜色，可以使用CSS的background-color属性。

tr:nth-child(even) {
  background-color: #f2f2f2;
}

td:nth-child(odd) {
  background-color: #e4e4e4;
}

上面的代码中，我们使用nth-child伪类选择器来选择表格中的奇偶行或列。设置background-color属性为所需的颜色值，这样就能将指定行或列的背景颜色改变。

添加表头和标题

表格通常有一个表头和一个表标题来提供更多的信息。我们可以使用th元素来定义表头和caption元素来定义标题。

<table>
  <caption>这是一个表格标题</caption>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

通过在table标签内使用caption元素，我们可以添加一个表标题。th元素用于定义表头，与td元素的使用方式相同。

使用GRIDLINES属性显示表格网格线

部分浏览器支持使用CSS的gridlines属性显示表格的网格线。可以通过设置table的gridlines属性为1来开启表格网格线。

<table gridlines="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

请注意，GRIDLINES属性的显示效果可能因不同浏览器而异，不是所有浏览器都支持该属性。

总结

通过使用HTML和CSS，我们可以创建出漂亮的带边框线的表格。使用table、tr、td、th和caption元素来构建表格的结构，使用CSS来设置边框线、背景颜色和其他样式。希望本文对你理解和使用HTML/CSS创建带边框线的表格有所帮助！