在html中添加列

Question

在html中添加列

我正在尝试创建一个表.我想知道如何在每列之间进行缩进.我知道我必须使用cellspacing但它似乎不起作用.如果你看一下这里的代码:

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

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/VnRRA/10/

请你帮助我好吗？

谢谢

Answer 1

Tan*_*ank 7

看一下网格系统以及他们如何设置他们的CSS.我个人喜欢960.gs,因为它易于理解且易于重新实现.我在你的代码上使用了类似的样式. 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;}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，1 月前
查看次数：	328 次
最近记录：	14 年前