Sunday, April 22, 2007

CSS and cellspacing=0 cellpadding=0

Very often webmasters use following HTML code for tables to remove free spacing between cells and clear padding within cell.


<table border=0 cellspacing=0 cellpadding=0>
….


Also this code sets zero for border property making it invisible. As alternative way you can use CSS instead pure HTML code to rule table visualization properties. This CSS code remove free spacing and between cells and remove padding within cell for all tables in your html document.


<STYLE type="text/css">


table {
border-collapse : collapse;
}

table td, table th {
padding : 0;
}

</STYLE>


I recommend very nice tool - HTML and CSS Table Border Style Wizard

posted by csssky @ 7:04 AM   0 comments

Saturday, April 21, 2007

To center table using CSS only

To center table using CSS only according CSS specification the following code should be used:


table {
margin-left : auto;
margin-right : auto;
}



This code perfectly works in firefox, opera, netscape and I guess in other browsers :). But when you open such centered table in IE (even IE 7) you may see that table has no alignment. It means that you didn’t declare “DOCTYPE” for your HTML document.

Without a “DOCTYPE” declaration, IE ignore margins definition for block level elements.

So, just add following at beginning of your document:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

posted by csssky @ 5:43 AM   0 comments