Adding columns in HTML

Question

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?

Please clarify what you mean by “columns” here. The CSS code snippet that you posted is not syntactically correct and has nothing to do with adding 3 columns in any sense that I can imagine. — Jukka K. Korpela
– Jukka K. Korpela, Commented Jan 6, 2012 at 16:15
@JukkaK.Korpela: Apology for now explaining it clearly, what I was trying to do is, under that image of what I have in the code I posted in jsfiddle, I wanted to create a column underneath.Please see screenshot: wikima4.com/assets/images/testpics/rb.png — tintincutes
– tintincutes, Commented Jan 9, 2012 at 8:21
this now looks like a design task: you’re giving an image (rather different from the original jsfiddle thing) and apparently asking for HTML and CSS code to implement it (even though your tags don’t contain CSS). — Jukka K. Korpela
– Jukka K. Korpela, Commented Jan 9, 2012 at 8:46
@JukkaK.Korpela: This is the same. I would like to know, if creating tables with 3 columns will work with this. If this is the best way forward.On the first link I sent, there were no columns yet. It was just an image and text below.I'm thinking to put the css within html if that is possible — tintincutes
– tintincutes, Commented Jan 9, 2012 at 8:53

Tank · Accepted Answer · 2012-01-06 16:25:51Z

7

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

answered Jan 6, 2012 at 16:25

Tank

1,0067 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tintincutes Over a year ago

Thanks for this. When I launch your code in Firefox, the text was not aligned with the image. I'm wondering how to do it. I don't quite understand what is with the ".col_3" Did you define the 3 columns?

Tank Over a year ago

You would put your image in the col_container div jsfiddle.net/VnRRA/11 . Which would center it all. The col_3 designation is just to state how many divisions you get - my thought was "we can use this 3 times in the width of the layout" it is a fairly standard solution to columns with css. Check out 960.gs

tintincutes Over a year ago

thanks for the link. I'm still trying to understand what your code means. What does this "clear:clear both" mean? If you can check here: this is my updated version now: jsfiddle.net/VnRRA/10/

Tank Over a year ago

in this case, it does something similar to starting a new row with a table. Otherwise adding more col_3 div elements, or any element for that matter may cause them to stack up in a non-uniform manner.

tintincutes Over a year ago

Hmmm I don't quite understand what you mean with a new row with a table?

|

FarligOpptreden · Accepted Answer · 2012-01-15 18:08:38Z

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. :)

Nickiler · Accepted Answer · 2012-01-16 08:29:40Z

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>

Matthew · Accepted Answer · 2012-01-18 12:04:43Z

1

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

edited Jan 18, 2012 at 12:04

answered Jan 15, 2012 at 18:50

Matthew

8,47610 gold badges41 silver badges67 bronze badges

Collectives™ on Stack Overflow

Adding columns in HTML

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related