Question

我正在尝试创建一个表。我想知道如何在每列之间进行缩进。我知道我必须使用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>

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

你能帮帮我吗？

由于

Answer 1

查看网格系统以及他们如何设置他们的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;}

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

Answer 2

您是否尝试过为表格单元格使用“margin”CSS属性？有点像：

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

当然，这使您只需定义特定边距即上边距，右边距，下边距或左边距。我发布的片段实际上只为每个表格单元格设置了左边距。您可以将每个“样式”属性的“边距”上的0更改为任何适合您喜欢的值。：）

Answer 3

看起来你的桌子上的细胞间距很麻烦。

执行此操作的正确方法是使用边框间距CSS样式，但您也可以使用填充控制位置（仅在表格边框内）。你也可以使用边距。

见这里： http://jsfiddle.net/xRS8d/

表1使用5px的边距。

表2的表格边框间距因border-collapse:collapse;

而关闭

表3显示了如何通过在TD上设置display:inline-block;来控制带边距的单元格间距

Answer 4

尝试使用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>

在html中添加列

4 个答案: