居中表格內容

我有困難的時候格式化表格。居中表格內容

我希望第2列居中，所有的圖片和文字都是一個在另一個下。我嘗試了一切，但沒有正確對齊。請一些幫助。

<html> 
    <body> 
     <table> 
      <tbody> 
       <tr style="background-color: #08568a;"> 
        <td style="text-align: center;"><span style="color: #ffffff;">Date</span></td> 
        <td style="text-align: center;"><span style="color: #ffffff;">Some text</span></td> 
        <td style="text-align: center;"><span style="color: #ffffff;">Some text</span></td> 
        <td style="text-align: center;"><span class="number" style="color: #ffffff;">№</span></td> 
       </tr> 
       <tr style="background-color: #e6f1ff;"> 
        <td style="text-align: center;"> 19:00 Text 
        </td> 
        <td style="text-align: center;"> Name lenght 1 <img class="alignnone size-full wp-image-13676" src="IMG URL" alt="ALT TEXT" width="24" height="24" />-:- <img class="alignnone size-full wp-image-13677" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> Name lenght 2 </td> 
        <td style="text-align: center;"> Some text</td> 
        <td style="text-align: center;"> 3</td> 
       </tr> 
       <tr style="background-color: #e6f1ff;"> 
        <td style="text-align: center;"> 22:00 Text 
        </td> 
        <td style="text-align: center;"> Name Lenght 3 <img class="alignnone size-full wp-image-13673" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> -:- <img class="alignnone size-full wp-image-13675" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> Name Lenght 4</td> 
        <td style="text-align: center;"> Some text</td> 
        <td style="text-align: center;"> 4</td> 
       </tr> 
       <tr style="background-color: #e6f1ff;"> 
        <td style="text-align: center;"> 16:00 Text </td> 
        <td style="text-align: center;"> Name Lenght 5 <img class="alignnone size-full wp-image-13675" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> -:- <img class="alignnone size-full wp-image-13677" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> Name lenght 6</td> 
        <td style="text-align: center;"> Some text</td> 
        <td style="text-align: center;"> 13</td> 
       </tr> 
       <tr style="background-color: #e6f1ff;"> 
        <td style="text-align: center;"> 16:00 Text </td> 
        <td style="text-align: center;"> Name lenght 7 <img class="alignnone size-full wp-image-13673" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> -:- <img class="alignnone size-full wp-image-13676" src="IMG URL" alt="ALT TEXT" width="24" height="24" />Name lenght 8</td> 
        <td style="text-align: center;"> Some text</td> 
        <td style="text-align: center;"> 16</td> 
       </tr> 
       <tr style="background-color: #e6f1ff;"> 
        <td style="text-align: center;"> 22:00 Text </td> 
        <td style="text-align: center;"> Name lenght 9 <img class="alignnone size-full wp-image-13675" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> -:- <img class="alignnone size-full wp-image-13676" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> Name lenght 10</td> 
        <td style="text-align: center;"> Some text</td> 
        <td style="text-align: center;"> 27</td> 
       </tr> 
       <tr style="background-color: #e6f1ff;"> 
        <td style="text-align: center;"> 22:00 Text 
        </td> 
        <td style="text-align: center;"> Name lenght 11 <img class="alignnone size-full wp-image-13677" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> -:- <img class="alignnone size-full wp-image-13673" src="IMG URL" alt="ALT TEXT" width="24" height="24" /> Name lenght 12</td> 
        <td style="text-align: center;"> Some text</td> 
        <td style="text-align: center;"> 28</td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

來源

2016-06-11 Marto

有CSS創建表和完成命令的方法。然而，有時候需要一種純粹的內嵌HTML方法來創建表格，並且提供的代碼提供了一些建議。

一種可以完成對中的方法是通過對齊標籤。表標記中的align命令將頁面中的表格居中，「左」或「右」也會更改放置位置。

TR align =「center」將對齊行中的文本。或者可以使用TH/TD標籤（中心，左，右）單獨居中文本。

也可以使用獨立的div命令。

TH標籤是可選標題行。可以在TH級別，任何行或單元格以及表格標籤中設置背景顏色。 '透明'是確保使用頁面背景顏色的安全顏色。

可以使用百分比或固定值（如像素）在TH和TD單元格中設置列寬。

有放置在單獨的行影像/字幕的幾種方法：

〜最懶的是使用BR標記，這將創建一個換行符和相當於按住Shift鍵輸入鍵盤。 BR在編碼方面佔有一席之地，但不應被過度使用。調整img樣式標記中的圖像填充以爲標題文本創建緩衝區空間。（行15:00）

http://www.w3schools.com/tags/tag_br.asp

人們可以交替使用 'P' 或將文本 'H' 標籤;他們定義文本樣式並創建新行（大致與Enter鍵盤相媲美）。

〜推薦的方法是在單元格中使用一個包含圖像和標題單獨行的小表。圖像填充和表格單元填充&間距可以相應調整。（行16:00）

〜或者結合這兩種方法爲image1 +'br'caption1和image2 +'br'caption2創建行。圖像填充和表格單元填充&間距可以相應調整。（行17:00）

表格邊框已被應用於便於查看。

字體已在較大的表中設置爲例;但是它們可以在樣式表中輕鬆定義並使用各種命令標籤實現。

希望這會有所幫助！

<table width="70%" align="center" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="transparent"> 

<tr align="center" bgcolor="#CCCCCC"> 
<th width="25%" style="font-family:Verdana; font-size:14pt;">Date</div></th> 
<th width="25%" style="font-family:Verdana; font-size:14pt;">Some text</div></th> 
<th width="25%" style="font-family:Verdana; font-size:14pt;">Some text</div></th> 
<th width="25%" style="font-family:Verdana; font-size:14pt;">No</div></th> 
</tr> 

<tr align="center"> 

    <td width="25%" style="font-family:Verdana; font-size:14pt;"><span class="style1" style="text-align: center;">15:00 Text </span></td> 
    <td style="font-family:Verdana; font-size:14pt;"><span style="text-align: center;">Name Length 1<br> 
    <img src="IMG URL" alt="ALT TEXT" width="24" height="24" style="padding:10px"/> <br> 
    -:-<br> 
    <img src="IMG URL" alt="ALT TEXT" width="24" height="24" style="padding:10px"/> <br> 
Name Length 2</span></td> 
    <td style="font-family:Verdana; font-size:14pt;">Text</td> 
    <td style="font-family:Verdana; font-size:14pt;">001</td> 

    </tr> 

    <tr align="center"> 

    <td style="font-family:Verdana; font-size:14pt;">16:00 Text</td> 
    <td style="font-family:Verdana; font-size:14pt;"> 

    <table width="95%" align="center" border="1" border-color="000000" cellspacing="5" cellpadding="0"> 
    <tr> 
     <td align="center">Name Length 5 
    <br> 
    </td> 
    </tr> 
    <tr> 
     <td align="center"><img src="IMG URL" alt="ALT TEXT" width="24" height="24" /></td> 
    </tr> 
    <tr> 
     <td align="center">-:-</td> 
    </tr> 
    <tr> 
     <td align="center"><img src="IMG URL" alt="ALT TEXT" width="24" height="24" /></td> 
    </tr> 
    <tr> 
     <td align="center">Name Length 6</td> 
    </tr> 
    </table> 

    <td style="font-family:Verdana; font-size:14pt;">Text here</td> 
    <td style="font-family:Verdana; font-size:14pt;">002</td> 
    </tr> 

    <tr align="center"> 

    <td width="25%" style="font-family:Verdana; font-size:14pt;">17:00 Text</td> 

    <td style="font-family:Verdana; font-size:14pt;"> 

    <table width="95%" align="center" border="1" border-color="000000" cellspacing="5" cellpadding="5">  
    <tr> 
     <td align="center">Name Length 1<br> 
      <img src="IMG URL" alt="ALT TEXT" width="24" height="24" /></td> 
     </tr> 
     <tr> 
     <td align="center">-:-</td> 
     </tr> 
     <tr> 
     <td align="center"><img src="IMG URL" alt="ALT TEXT" width="24" height="24" /> <br> 
     Name Length 2</td> 
    </tr> 
    </table>  

    <td style="font-family:Verdana; font-size:14pt;">Text here</td> 
    <td style="font-family:Verdana; font-size:14pt;">003</td> 
    </tr> 

    </table> 


<div align="center"> Div align="center" can be used as a stand-alone command to center elements.</div> 
<div align="left"> Use div align="left" to justify to the left.</div> 
<div align="right"> Use div align="right" to justify to the right.</div>

來源

2016-07-17 23:24:36

居中表格內容

回答

相關問題