Skip to main content

How to remove the space between cells in tables | CSS tutorial


Cell’s margin and padding property will have a default value, so by setting the margin and padding to 0 wont remove the gap between cells, to remove these gaps we have use the border-collapse property and set the value to collapse.
 
An example use of border-collapse property:


CSS Code:
table{ border:2px #0CF solid;  margin:10% auto 10% auto; border-collapse:collapse;}
table td{border:2px #0CF solid;}


HTML Code:

<table width="200" border="0">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Year</th>
    <th scope="col">Country</th>
  </tr>
  <tr>
    <td>purush</td>
    <td>1988</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Dave</td>
    <td>1988</td>
    <td>United States</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>1989</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Matthew</td>
    <td>1999</td>
    <td>Japan</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>1989</td>
    <td>Canada</td>
  </tr>
</table>
border collapse property using CSS


border collapse property using CSS


Comments

  1. Cool! Your blog is full of informative thought about web development. Please continue being kind and helpful to us for posting tutorial about this topic. :D

    Web developer in Philippines-->http://www.myoptimind.com/web-design-outsourcing-philippines

    ReplyDelete

Post a Comment

Thanks for Visiting for any questions or suggestions please comment below
Cheers,

Popular posts from this blog

Adding a button in HTML | styling a button

To add a button in a HTML page use <input> tags and specify the type as button like so
<input type=”button” value=”submit” action=”submit.php”> this code will be rendered in browser like in Figure 1.1
Further more if you wish to style this button we can apply a set of CSS rules to make the buttons look pretty here are a few examples: Download code for these buttons here



Advanced Jquery easing | Demo and Download

Swing and Jquery easing are included in the Jquery core library but there are many other easing methods which are included in the Jquery easing plugin, available in the Jquery plugin repository. Here are the other easing methods: easeInCirc easeInOutExpo easeOutBack easeOutElastic easeOutBounce easeInOutElastic



to use this easing methods we need to pass its name to the animate function lets see an example which covers most of the above said easing methods.
Download DEMO

<! DOCTYPE HTML> </head> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/easing.js"></script> <style> p{ height:150px; overflow:hidden;} #div1,#div2,#div3,#div4{ position:absolute; border:1px solid #999; border-radius:5px; width:350px; padding:6px;} #div1,#div3{ margin-left:5%; background-color:#00CCFF; } #div2,#div4{ margin-left:50%; background-color:#FC0;} #div3,#div4{ margin-top:…