Question

我很难格式化表格。

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

Answer 1

有用于创建表和完成命令的CSS方法。但是，有时候人们想要一个纯粹的内联HTML方法来创建一个表，并且提供的代码提供了建议。

可以通过对齐标签完成对中的一种方法。表格标签中的align命令将表格置于页面中心，＆＃34; left＆＃34;或＆＃34;对＆＃34;也会改变位置。

TR align =＆＃34; center＆＃34;将证明行中的文本。或者文本可以使用TH / TD标签（中间，左侧，右侧）单独居中。

也可以使用独立div命令。

TH标签是可选的标题行。可以在TH级别，任何行或单元格以及表格标签本身中设置背景颜色。＆＃39;透明＆＃39;是一种安全的颜色，以确保使用页面的背景颜色。

可以使用百分比或像素等固定值在TH和TD单元格中设置列宽。

有几种方法可以将图像/标题放在不同的行上：

〜最懒的是使用BR标签，它会创建一个换行符，与Shift-Enter键盘相当。 BR在编码方面占有一席之地，但不应过度使用。调整img样式标记中的图像填充以为标题文本创建缓冲区空间。（第15:00行）

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

可以选择使用＆＃39; p＆＃39;或者＆＃39; h＆＃39;文本周围的标签;它们定义文本样式并创建新行（与Enter键大致相当）。

〜推荐的方法是在单元格中使用一个小表，其中包含用于图像和标题的单独行。图像填充和表格单元格填充＆amp;间距可以相应调整。（第16:00行）

〜或者将两种方法结合起来为image1 +＆＃39; br＆＃39; caption1和image2 +＆＃39; br＆＃39; caption2的。图像填充和表格单元格填充＆amp;间距可以相应调整。（第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>

中心表内容

1 个答案: