CODEWITHSUNDEEP
html
tintincutes
tintincutes

Reputation: 5798

Adding columns in HTML

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?

Upvotes: 3

Views: 701

Answers (4)

Matthew
Matthew

Reputation: 8426

It looks like you are having trouble with spacing on the cells in your table.

The right way to do this is with the border-spacing CSS style but you can also control position (only within the table borders though) with padding. You can also use margins with a trick.

See here: http://jsfiddle.net/xRS8d/

Table 1 is using 5px of border-spacing.

Table 2 has border spacing on the table turned off with border-collapse:collapse;

Table 3 shows how you can control the spacing of the cells with margin by setting display:inline-block; on the TDs

Upvotes: 1

Nickiler
Nickiler

Reputation: 299

Try some padding with CSS

<style type="text/css">

table tr td{
    padding:50px;
}

</style>

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

Upvotes: 1

FarligOpptreden
FarligOpptreden

Reputation: 5043

Have you tried using the "margin" CSS attribute for the table cells? Something along the lines of:

<tr>
    <td width=20% style="margin:0 0 0 10px">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% style="margin:0 0 0 50px">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% style="margin:0 0 0 50px">Table Cell - This is my text. This is my text. This is my text. This is my text. This is my text</td>        
</tr>

This, of course, makes it easy for you to only define specific margins, i.e. top, right, bottom or left margins. The snippet I posted actually only sets a LEFT margin for each table cell. You can change the 0's on the "margin" for each "style" attribute to any value that suits your liking. :)

Upvotes: 1

Tank
Tank

Reputation: 1006

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

Upvotes: 7

Related Questions