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

本文介绍如何通过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:(去掉样式后)

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值