HTML:将td对齐在下一个tr的中心

时间:2017-08-22 09:34:52

标签: css html-table html-email

我正在创建HTML电子邮件程序。 我想让td元素成为下一个tr的中心。如果有1个td元素那么它应该是tr的中心,如果有2个td元素那么它也应该在tr的中心,如果有3个td元素那么它应该在tr的中心。 我怎么能这样做? 在制作HTML Emailer时,我无法使用任何外部CSS或库。 我使用了以下代码。



<table cellspacing="0" cellpadding="0" border="0" style="background:white; text-align:center; margin: 0 auto !important; padding: 0px; width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-family:Arial" >
  <tbody>
    <tr>
      <td >
        <table style="width:450px;margin:0 auto;">
          <tbody>
            <tr>
            
              <td align="center">
                <table style="margin:0 15px;">
                  <tbody>
                    <tr>
                      <td valign="middle">
                        <img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
                      </td>
                      <td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
                        
                        <span style="margin:0;font-size:11px;">element 1 
                        </span>
                      </td>

                    </tr>
                  </tbody>
                </table>
              </td>
              
              <td align="center">
                <table style="margin:0 15px;">
                  <tbody>
                    <tr>
                      <td valign="middle">
                        <img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
                      </td>
                      <td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
                        
                        <span style="margin:0;font-size:11px;">element 1 
                        </span>
                      </td>

                    </tr>
                  </tbody>
                </table>
              </td><td align="center">
                <table style="margin:0 15px;">
                  <tbody>
                    <tr>
                      <td valign="middle">
                        <img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
                      </td>
                      <td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
                        
                        <span style="margin:0;font-size:11px;">element 1 
                        </span>
                      </td>

                    </tr>
                  </tbody>
                </table>
              </td><td align="center">
                <table style="margin:0 15px;">
                  <tbody>
                    <tr>
                      <td valign="middle">
                        <img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
                      </td>
                      <td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
                        
                        <span style="margin:0;font-size:11px;">element 1 
                        </span>
                      </td>

                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            
            <tr>
            
              
              
              <td align="center">
                <table style="margin:0 15px;">
                  <tbody>
                    <tr>
                      <td valign="middle">
                        <img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
                      </td>
                      <td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
                        
                        <span style="margin:0;font-size:11px;">element 1 
                        </span>
                      </td>

                    </tr>
                  </tbody>
                </table>
              </td><td align="center">
                <table style="margin:0 15px;">
                  <tbody>
                    <tr>
                      <td valign="middle">
                        <img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
                      </td>
                      <td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
                        
                        <span style="margin:0;font-size:11px;">element 1 
                        </span>
                      </td>

                    </tr>
                  </tbody>
                </table>
              </td><td align="center">
                <table style="margin:0 15px;">
                  <tbody>
                    <tr>
                      <td valign="middle">
                        <img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
                      </td>
                      <td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
                        
                        <span style="margin:0;font-size:11px;">element 1 
                        </span>
                      </td>

                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

任何帮助都会很棒。

5 个答案:

答案 0 :(得分:0)

我不确定我得到你想要的东西。但我认为你正在寻找colspan

&#13;
&#13;
<table>
    <tr>
        <td>Element 1</td>
        <td>Element 2</td>
        <td>Element 3</td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: center">Centered</td>
    </tr>
</table>
&#13;
&#13;
&#13;

使用colspanrowspan也应该使这些嵌套表更易于管理。

答案 1 :(得分:0)

你的问题并不是很清楚你想要做什么,但如果你想要一个纯HTML,

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table style="width:100%">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td align="right">Right</td>
    </tr>
    <tr>
      <td>February</td>
      <td align="center">Centered</td>
    </tr>
    <tr>
      <td>February</td>
      <td align="left">left</td>
    </tr>  
  </table>
</body>

</html>

colspan的另一个例子,

<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <table style="width:100%">
    <tr style="text-align:center">
      <td>Month</td>
      <td>Savings</td>
      <td>Gone</td>
    </tr>
    <tr>
      <td colspan="3">
        <table style="width:100%">
          <tr style="text-align:center;">
            <td>
              test
            </td>
            <td>
              test2
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>

答案 2 :(得分:0)

我的问题不明确,而且在嵌套表格时也需要谨慎。 你可以使用&#39; colspan&#39;

答案 3 :(得分:0)

您需要使用colspan和text-align:center。请记住,如果列中的TD小于其中的最大TD数,则必须将colspan设置为该值。因此,在具有一个和两个TD的列下方设置为3以与具有三个的一个列对齐。我将两个TD放在一个单独的表中,这也是您可以用来在TR中使用不同TD的另一种技术。请注意,表所在的TD也将其colspan声明为3,它们也必须相等。

在excel表中考虑它,你有列a,b,c等。如果您希望列为三个中心,则必须跨越a,b和c。

<table cellspacing="1" cellpadding="0"          border="1" style=" width:100%; text-align:center;">
 <tr>
   <td colspan="3">ipsum</td>
 </tr>
 <tr>
   <td colspan="3">
     <table cellspacing="1" cellpadding="0"  border="1" style=" width:100%; text-align:center;">
 <tr>
  <td>ipsum</td>
  <td>ipsum</td>
 </tr>
   </table>
    </td>
 </tr>
 <tr>
  <td>ipsum</td>
  <td>ipsum</td>
  <td>ipsum</td>
 </tr>
</table>

答案 4 :(得分:0)

我认为你需要的是混合方法。它需要的代码多于您可能习惯的代码。

要查看代码的实际效果:

  

运行代码段,全屏显示并调整浏览器大小。

混合编码方法: 混合编码使用outlook条件语句专门为outlook创建列,而所有其他电子邮件客户端读取div标签以创建列。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="600">
<![endif]-->
    <table class="container hundred" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="width:100%; max-width: 600px;">
	<tr>
	  <!-- 5 column starts -->
	  <td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;">
	    <!--[if (gte mso 9)|(IE)]>
	<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td align="left" valign="top" width="120">
	<![endif]-->
	    <div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
	      <table width="100%" border="0" cellspacing="0" cellpadding="0">
	        <tbody>
	          <tr>
	            <td style="font-size:12px; font-family:Arial; color:#000000;">Column 1 of 5</td>
	            </tr>
	          </tbody>
	        </table>
	      </div>
	    
	    <!--[if (gte mso 9)|(IE)]>
	</td><td align="left" valign="top" width="120">
	<![endif]-->
	    
	    <div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
	      <table width="100%" border="0" cellspacing="0" cellpadding="0">
	        <tbody>
	          <tr>
	            <td style="font-size:12px; font-family:Arial; color:#000000;">Column 2 of 5</td>
	            </tr>
	          </tbody>
	        </table>
	      </div>
	    
  <!--[if (gte mso 9)|(IE)]>
	</td><td align="left" valign="top" width="120">
	<![endif]-->
	    
	    <div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
	      <table width="100%" border="0" cellspacing="0" cellpadding="0">
	        <tbody>
	          <tr>
	            <td style="font-size:12px; font-family:Arial; color:#000000;">Column 3 of 5</td>
	            </tr>
	          </tbody>
	        </table>
	      </div>
	    
  <!--[if (gte mso 9)|(IE)]>
	</td><td align="left" valign="top" width="120">
	<![endif]-->
	    
	    <div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
	      <table width="100%" border="0" cellspacing="0" cellpadding="0">
	        <tbody>
	          <tr>
	            <td style="font-size:12px; font-family:Arial; color:#000000;">Column 4 of 5</td>
	            </tr>
	          </tbody>
	        </table>
	      </div>
	    
  <!--[if (gte mso 9)|(IE)]>
	</td><td align="left" valign="top" width="120">
	<![endif]-->
	    
	    <div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
	      <table width="100%" border="0" cellspacing="0" cellpadding="0">
	        <tbody>
	          <tr>
	            <td style="font-size:12px; font-family:Arial; color:#000000;">Column 5 of 5</td>
	            </tr>
	          </tbody>
	        </table>
	      </div>
	    
	    
	    <!--[if (gte mso 9)|(IE)]>
			</td>
		</tr>
	</table>
	<![endif]-->
	    </td>
	  <!-- 5 column ends -->
	  </tr>
</table>

    
 <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->
</td>
  </tr>
</table>

希望这是您正在寻找的答案。

干杯