css 创建一个有边框表格

CSS 是一种用于网页样式设计的语言，其中创建表格的方法是基于 HTML 标签的语义性样式，通过设定 CSS 属性来实现不同样式的表格。下面我们来学习如何创建一个有边框的表格。

  table>
        thead>
          tr>
            th>
    标题 1/th>
            th>
    标题 2/th>
            th>
    标题 3/th>
          /tr>
        /thead>
        tbody>
          tr>
            td>
    单元格 1-1/td>
            td>
    单元格 1-2/td>
            td>
    单元格 1-3/td>
          /tr>
          tr>
            td>
    单元格 2-1/td>
            td>
    单元格 2-2/td>
            td>
    单元格 2-3/td>
          /tr>
        /tbody>
      /table>
  table {
        border-collapse: collapse;
        width: 100%;
  }
  th {
        height: 50px;
        background-color: #f1f1f1;
        text-align: center;
        border: 1px solid #ddd;
  }
  td {
        border: 1px solid #ddd;
        text-align: center;
  }
    

上面的代码中，table> 表示要创建一个表格，thead> 、tbody> 和 tr> 定义表格的头部、主要内容区域和行，th> 和 td> 则用于定义表格的表头和单元格。在 CSS 部分，我们使用 border-collapse 属性将表格的边框合并，width 属性使表格铺满整个页面，而 th 和 td 的 border 属性则定义单元格的边框颜色和粗细程度，background-color 属性则用于设置表头的背景颜色。

总之，我们只需要按照上面的代码模板来修改我们自己的表格内容，就可以快速创建一个漂亮的有边框表格了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！