css table怎么加边框

在网页设计中，表格是一个常用的元素。如何给表格加边框？下面就让我们来看看使用CSS如何给表格添加边框。 首先，我们需要在HTML中创建一个表格。代码如下：

<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>30</td>
    </tr>
</table>

上面的代码创建了一个简单的表格，包含姓名、性别和年龄三列，两行数据。但是这个表格还没有边框。 在CSS中，我们使用border属性来给表格加边框。我们可以直接在table标签上添加border属性，这会给表格的所有边框都添加样式。例如：

<table border="1">
...
</table>

上面的代码会给表格的所有边框添加宽度为1像素的黑色实线边框。 但是，这种方法不太推荐使用，因为HTML属性和CSS混合使用不太好维护。更好的方法是使用CSS为表格添加边框。 在CSS中，我们可以使用以下代码为表格添加边框：

table {
    border-collapse: collapse; /* 去掉单元格之间的间距 */
    border: 1px solid #ddd; /* 给表格所有边框添加样式 */
}

td,th {
    border: 1px solid #ddd; /* 给单元格添加边框 */
    padding: 5px; /* 给单元格添加内边距 */
}

上面的代码会为所有的表格添加宽度为1像素的实线边框，颜色为#ddd。我们还使用了border-collapse属性来去掉单元格之间的间距，并为单元格添加了内边距。 可以看到，CSS代码非常简洁，并且可以为所有的表格添加样式。这也是CSS的优点之一。 在实际开发中，我们可以根据需要调整边框的宽度、样式和颜色，以达到最佳效果。 总的来说，给表格添加边框很简单，只需要使用CSS的border属性即可。我们可以为表格所有边框添加样式，也可以为单元格添加边框。使用CSS可以让代码更加简洁，也更加易于维护。