ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

21-CSS Table

  • The border-collapse tells you  that shall  the browser should control the appearance of the adjacent borders that touch each other or  each cell should maintain its  own style?
  • The border-spacing tells you about  the width that should appear between  different table cells.
  • The caption-side captions  provided above the table in the document. You use the caption-side property to maintain the position of the table caption.
  • The empty-cells describes  whether the border should be actually shown or not  if a cell is empty.
  • The table-layout provides browsers to speed up a given  layout of  your table by using the  width properties that comes across for the rest of  columns instead of  having to load the whole table.

Example:

 

  1. <html>
  2.    <head>
  3.    
  4.       <style type="text/css">
  5.          table.one {border-collapse:collapse;}
  6.          table.two {border-collapse:separate;}
  7.          td.first {
  8.             border-style:dotted;
  9.             border-width:4px;
  10.             border-color:black;
  11.             padding: 12px;
  12.          }
  13.          td.second {
  14.             border-style:solid;
  15.             border-width:4px;
  16.             border-color:green;
  17.             padding:12px;
  18.          }
  19.       </style>
  20.      
  21.    </head>
  22.    <body>
  23.    
  24.       <table class="collapse">
  25.          <caption>Collapse Border Example</caption>
  26.          <tr><td class="first"> here you can see the  Cell first Collapse Example</td></tr>
  27.          <tr><td class="second"> here you can see the Cell  second Collapse Example</td></tr>
  28.       </table>
  29.       <br />
  30.      
  31.       <table class="collapse2">
  32.          <caption>Separate Border Example</caption>
  33.          <tr><td class="first"> here you can see the  Cell first separate Example</td></tr>
  34.          <tr><td class="second"> here you can see the Cell second  separate Example</td></tr>
  35.  
  36.       </table>
  37.      
  38.    </body>
  39. </html>
Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!