居中表格内容

我有困难的时候格式化表格。居中表格内容

我希望第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

居中表格内容

回答

相关问题