CSS - 表格

本教程将教您如何使用CSS设置HTML表的不同属性.您可以设置表的以下属性 :

  • border-collapse 指定是否浏览器应控制相互接触的相邻边框的外观或每个单元格是否应保持其样式.

  • border-spacing 指定表格单元格之间应显示的宽度.

  • 标题侧标题显示在< caption>中.元件.默认情况下,它们呈现在文档中的表格上方.您可以使用标题侧属性来控制表格标题的位置.

  • 空单元格指定在单元格为空时是否应显示边框.

  • table-layout 允许浏览器加快布局通过使用它为列的其余部分遇到的第一个宽度属性,而不是在渲染之前必须加载整个表.

现在,我们将看到如何将这些属性与示例一起使用.

border-collapse属性

此属性可以有两个值

<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>

The border-spacing Property

border-spacing属性指定分隔相邻单元格的距离。边界。 它可以采用一个或两个值; 这些应该是长度单位。

如果提供一个值,它将应用于垂直和水平边框。 或者你可以指定两个值,在这种情况下,第一个引用水平间距,第二个引用垂直间距和减去;

注意:不幸的是,此属性在Netscape 7或IE 6中不起作用。

<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>

The caption-side Property

标题侧属性允许您指定<caption>元素的内容应放置在与表的关系中的位置。 下表列出了可能的值。

此属性可以具有顶部,底部,左侧或右侧四个值中的一个。 以下示例使用每个值。

注意:这些属性可能不适用于您的IE浏览器。

<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>

The empty-cells Property

empty-cells属性指示没有任何内容的单元格是否应显示边框。

此属性可以具有三个值之一 - 显示,隐藏或继承。

这是用于隐藏<table>元素中空单元格边框的empty-cells属性。

<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>

The table-layout Property

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>