html细线表格

最新推荐文章于 2024-06-14 01:10:08 发布

大斧滴熊

最新推荐文章于 2024-06-14 01:10:08 发布

阅读量854

点赞数

本文链接：https://blog.youkuaiyun.com/zhouyuzhu666/article/details/119356815

版权

本文介绍了如何使用HTML和基本CSS创建简洁、线条细的表格，适用于数据展示，重点讲解了表格布局、单元格样式及边框处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服 -->
    <table  border="1px" cellspacing="0px" width="500px" height="300px">
        <tr >
          <td>姓名</td>
          <td>年龄</td>
          <td>身高</td>
        </tr>
        <tr >
          <td>张三</td>
          <td>19</td>
          <td>1.78</td>
        </tr>
      </table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 细线表格的制作方式:
    1.给table标签设置bgcolor="black"，cellspacing = "1px"
    2.给tr标签设置bgcolor="white" -->
    <table bgcolor="black" cellspacing="1px" width="500px" height="300px">
        <tr bgcolor="white">
          <td>姓名</td>
          <td>年龄</td>
          <td>身高</td>
        </tr>
        <tr bgcolor="white">
          <td>张三</td>
          <td>19</td>
          <td>1.78</td>
        </tr>
      </table>
</html>

在这里插入图片描述