网络技术问题 | HTML 课程 | 练习测验 2 | 问题 16

问题描述

在 HTML 中，如何创建一个表格并设置其边框颜色？

解决方案

要在 HTML 中创建一个表格，可以使用 <table> 元素和 <tr>、<td> 元素来定义表格的结构。要设置表格边框的颜色，可以使用 CSS 样式。

下面是一些代码片段来帮助您创建一个带有边框颜色的表格：

<!-- 带有边框颜色的表格 -->
<style>
table {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  color: #333;
  font-size: 14px;
  border: 1px solid #ccc;
}

th, td {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: center;
  border: 1px solid #ccc;
}

</style>

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

以上代码定义了一个带有边框颜色的表格。可以使用 border 属性来定义表格和单元格的边框样式。此外，可以使用 background-color 属性来定义标题和单元格的背景颜色。

使用以上代码可以定义出下面的表格：

| # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter |

希望以上的解决方案可以帮助你更好地理解在 HTML 中创建带有边框颜色的表格。