Menu
I'm trying to create a table. And I would like to know how to make indentions between each column. I know that I have to use cellspacing but it seems it doesn't work. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>rolebee</title>
<style type="text/css">
#centerize{margin:0 auto;text-align:left; width:1200px; border-top: #c00 solid 3px;}
#container { width: 1200px; margin: 0 0 0 20px; }
</style>
</head>
<body>
<center>
<img src="http://www.wikima4.com/assets/templates/wikima4/css/images/red.jpg" alt="wikima4 banner" width="1200" height="150 " />
<p></p>
</center>
<div id="centerize" align="center" >
<p>
<font size="3" face="calibri" >
<!--<table border=0 cellpadding=20 width=100%> -->
<br/>
<table border="1" width="100%">
<tr>
<td width=20% cellspacing="10">Table Cell - This is my text. This is my text. This is my text. This is my text. This is my text.This is my text</td>
<td width=60% cellspacing="50">Table Cell - This is my text. This is my text. This is my text. This is my text. This is my text.This is my text.This is my textThis is my textThis is my textThis is my textThis is my textThis is my textThis is my textThis is my textThis is my text</td>
<td width=20% cellspacing="50">Table Cell - This is my text. This is my text. This is my text. This is my text. This is my text</td>
</tr>
</table>
</font>
</p>
</div>
</body>
</html>
http://jsfiddle.net/VnRRA/10/
What can I try next?
449
look at a grid system and how they set up their css. I personally like 960.gs as it was easy to understand and simple to re-implement. I've used a similar style on your code. http://jsfiddle.net/VnRRA/8/
css
.centerize {margin:0 auto;text-align:center;width:300px;}
#col_container {
width:1200px;
margin:0 auto;
}
.col_3 {
width:380px;
padding:10px;
float:left;
}
.clear {clear:both;}
html
<div id="col_container">
<div class="col_3">
<div class="centerize" align="justified">
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
</div>
</div>
<div class="col_3">
<div class="centerize" align="justified">
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
</div>
</div>
<div class="col_3">
<div class="centerize" align="justified">
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
</div>
</div>
<div class="clear"> </div>
<div class="col_3">
<div class="centerize" align="justified">
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
</div>
</div>
</div><!--col_container-->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
