在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

在html5中不支持的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

2022-06-08 07:43:29

1.初始:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>cellspacing的css实现</title>

     <style type="text/css">

         table {

             border: 1px solid red;

         }

         td {

             border: 1px solid red;

         }

     </style>

 </head>

 <body>

 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

     <table>

         <tr>

             <td>单元格1-1</td>

             <td>单元格1-2</td>

         </tr>

         <tr>

             <td>单元格2-2</td>

             <td>单元格2-2</td>

         </tr>

         <tr>

             <td>单元格3-1</td>

             <td>单元格3-2</td>

         </tr>

     </table>

 </body>

 </html>

效果:

在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

2. 通过css实现: cellspacing = 0;

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>cellspacing的css实现</title>

     <style type="text/css">

         table {

             border: 1px solid red;

             border-collapse: collapse;

         }

         td {

             border: 1px solid red;

         }

     </style>

 </head>

 <body>

 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

     <table>

         <tr>

             <td>单元格1-1</td>

             <td>单元格1-2</td>

         </tr>

         <tr>

             <td>单元格2-2</td>

             <td>单元格2-2</td>

         </tr>

         <tr>

             <td>单元格3-1</td>

             <td>单元格3-2</td>

         </tr>

     </table>

 </body>

 </html>

 border-collapse: collapse; 是针对 <table>元素的.

效果:

在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

3. css实现 cellspacing = xx;

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>cellspacing的css实现</title>

     <style type="text/css">

         table {

             border: 1px solid red;

             border-collapse: separate;

             border-spacing: 20px;

         }

         td {

             border: 1px solid red;

         }

     </style>

 </head>

 <body>

 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

     <table>

         <tr>

             <td>单元格1-1</td>

             <td>单元格1-2</td>

         </tr>

         <tr>

             <td>单元格2-2</td>

             <td>单元格2-2</td>

         </tr>

         <tr>

             <td>单元格3-1</td>

             <td>单元格3-2</td>

         </tr>

     </table>

 </body>

 </html>

10             border-collapse: separate;

11             border-spacing: 20px;

1--  border-spacing 只有在 border-collapse : separate 时 才会起作用.
2--  border-collapse,  border-spacing 都是 针对  <table>元素的.

在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

4. css实现 cellpadding

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>cellspacing的css实现</title>

     <style type="text/css">

         table {

             border: 1px solid red;

             border-collapse: collapse;

         }

         td {

             border: 1px solid red;

             padding: 20px;

         }

     </style>

 </head>

 <body>

 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

     <table>

         <tr>

             <td>单元格1-1</td>

             <td>单元格1-2</td>

         </tr>

         <tr>

             <td>单元格2-2</td>

             <td>单元格2-2</td>

         </tr>

         <tr>

             <td>单元格3-1</td>

             <td>单元格3-2</td>

         </tr>

     </table>

 </body>

 </html>

1-- border-collapse 是针对 <table>元素的. padding 是针对 td 元素的.

在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

-----------------------------------------------------------------------------------------------------

5. tr, th 有border . 没有 padding

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>cellspacing的css实现</title>

     <style type="text/css">

         table {

             border: 1px solid red;

             border-collapse: collapse;

         }

         tr {

             border: 1px solid black;

             padding: 20px;

         }

     </style>

 </head>

 <body>

 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>

     <table>

         <tr>

             <td>单元格1-1</td>

             <td>单元格1-2</td>

         </tr>

         <tr>

             <td>单元格2-2</td>

             <td>单元格2-2</td>

         </tr>

         <tr>

             <td>单元格3-1</td>

             <td>单元格3-2</td>

         </tr>

     </table>

 </body>

 </html>

效果:

在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

参考链接:

CSS中cellspacing和cellpadding属性用法揭秘

的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

码农公寓