如何在HTML表格中通过CSS对TD单元格边框的4条边进行着色？

在HTML表格中，可以通过CSS来设置<td>单元格的边框样式，包括对四条边进行着色。以下是一个基本的示例，展示了如何实现这一点：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Colored Borders</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</body>
</html>

CSS部分（styles.css）

table {
    border-collapse: collapse; /* 合并边框 */
}

td {
    border: 2px solid #ff0000; /* 设置边框宽度、样式和颜色 */
    padding: 10px; /* 单元格内边距 */
}

解释

border-collapse: collapse;：这个CSS属性用于合并表格单元格之间的边框，使得边框看起来更整洁。
border: 2px solid #ff0000;：这个CSS属性用于设置单元格的边框。2px是边框的宽度，solid是边框的样式，#ff0000是边框的颜色（红色）。
padding: 10px;：这个CSS属性用于设置单元格内部的填充，使得内容不会紧贴边框。