table表格去掉默认样式的方法！

最新推荐文章于 2025-06-11 08:30:00 发布

原创最新推荐文章于 2025-06-11 08:30:00 发布 · 1.5w 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍如何通过CSS样式调整，去除HTML表格的默认样式，包括cellpadding和cellspacing，实现更美观的显示效果。提供了两种方法，一种是在CSS样式中设置，另一种是在HTML表格标签中直接设置。

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

 今天在写代码的时候发现表格具有一些默认的样式有时候并不需要，它会影响美观!可以通过以下方式去掉它。
cellpadding -- 代表单元格外面距离,用于隔单元格与单元格空间 。
cellspacing-- 代表表格边框与单元格补白距离,单元格补白间距离。

方法1：（在css样式中设置）

table{
  border-collapse:collapse;  //表格的边框合并，如果相邻，则共用一个边框。
  border-spacing:0px;  	     //设置行与单元格边框的间距。
 }

方法2：(在行内设置)

<table border="0" cellspacing="0" cellpadding="0">

下面是我的代码，大家可以更加加深了解！！！,

<style type="text/css">
 table{
  border-collapse:collapse;  
  border-spacing:0px;  
 }
 img{
  width:40px;
  height:40px;
 }
 </style>


<body>
<div>
 <table>
  <tr>
   <td></td>
   <td>商品</td>
   <td>单价</td>
   <td>数量</td>
   <td>操作</td>
  </tr>
  <tr>
   <td><img src="images/f1.jpg"></td>
   <td><a href="">丹穆尼通勤波点印花毛衣</a></td>
   <td>180.0</td>
   <td>2</td>
   <td><a href="">删除</a></td>
  </tr>
  <tr>
   <td><img src="images/f2.jpg"></td>
   <td><a href="">预售太平洋女装连衣裙</a></td>
   <td>765.0</td>
   <td>4</td>
   <td><a href="">删除</a></td>
  </tr>
  <tr>
   <td><img src="images/f3.jpg"></td>
   <td><a href="">丹穆尼通勤红色小外套</a></td>
   <td>456.0</td>
   <td>2</td>
   <td><a href="">删除</a></td>
  </tr>
  <tr>
   <td><img src="images/f4.jpg"></td>
   <td><a href="">曼巴森秋装新款套头衫</a></td>
   <td>140.0</td>
   <td>1</td>
   <td><a href="">删除</a></td>
  </tr>
 </table>

运行结果1：（未去掉样式）

在这里插入图片描述
运行结果2：（去掉样式后）