无涯教程网

关注我们

CSS - 表格(Table)

CSS - 表格(Table)

本教程将教您如何使用CSS设置HTML Table的不同属性。

border-collapse : 设置是否把表格边框合并为单一的边框。
border-spacing : 设置分隔单元格边框的距离。
caption-side : 设置表格标题的位置。
empty-cells : 设置是否显示表格中的空单元格。
table-layout : 设置显示单元、行和列的算法。

border-collapse 属性

设置是否把表格边框合并为单一的边框，该属性可以具有两个值collapse 和separate ，以下示例使用两个值-

<html>
   <head>
      <style type="text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class="one">
         <caption>Collapse Border Example</caption>
         <tr><td class="a"> Cell A Collapse Example</td></tr>
         <tr><td class="b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class="two">
         <caption>Separate Border Example</caption>
         <tr><td class="a"> Cell A Separate Example</td></tr>
         <tr><td class="b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

它将产生以下输出-

无涯教程网

border-spacing 属性

border-spacing 属性设置分隔单元格边框的距离。

如果提供一个值，则它将同时应用于垂直和水平边框。或者您可以指定两个值，在这种情况下，第一个是水平间距，第二个是垂直间距-

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

现在让无涯教程修改前面的示例，看看效果-

<html>
   <head>
      <style type="text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class="one" border="1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class="two" border="1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

它将产生以下输出-

无涯教程网

caption-side 属性

该属性可以具有 top，bottom，left 或 right 四个值之一。

<html>
   <head>
      <style type="text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style="width:400px; border:1px solid black;">
         <caption class="top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style="width:400px; border:1px solid black;">
         <caption class="bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style="width:400px; border:1px solid black;">
         <caption class="left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style="width:400px; border:1px solid black;">
         <caption class="right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

它将产生以下输出-

无涯教程网

此属性可以具有三个值之一-show，hide或inherit。

<html>
   <head>
      <style type="text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class="empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class="empty">value</td>
            <td class="empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class="empty">value</td>
            <td class="empty"></td>
         </tr>
      </table>
      
   </body>
</html>

它将产生以下输出-

无涯教程网

table-layout 属性

此属性可以具有以下三个值之一:fixed，auto或inherit。

<html>
   <head>
      <style type="text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class="auto" border="1" width="100%">
         <tr>
            <td width="20%">1000000000000000000000000000</td>
            <td width="40%">10000000</td>
            <td width="40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class="fixed" border="1" width="100%">
         <tr>
            <td width="20%">1000000000000000000000000000</td>
            <td width="40%">10000000</td>
            <td width="40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

它将产生以下输出-

无涯教程网

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

玩转Git三剑客 -〔苏玲〕

玩转Spring全家桶 -〔丁雪丰〕

消息队列高手课 -〔李玥〕

小马哥讲Spring核心编程思想 -〔小马哥〕

成为AI产品经理 -〔刘海丰〕

玩转Vue 3全家桶 -〔大圣〕

深入浅出可观测性 -〔翁一磊〕

快速上手C++数据结构与算法 -〔王健伟〕

手把手带你写一个 MiniTomcat -〔郭屹〕

好记忆不如烂笔头。留下您的足迹吧 :)