文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使表格内容居中

问使表格内容居中
EN

Stack Overflow用户
提问于 2016-06-11 22:02:10
回答 1查看 108关注 0票数 0

我在格式化表格时遇到了困难。

我希望第二列居中，所有的图片和文本都在另一个下面。我尝试了所有的方法，但它们不能正确地对齐。请帮帮忙。

代码语言：javascript
复制
<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>
html
EN

回答 1

Stack Overflow用户

发布于 2016-07-18 07:24:37

有一些用于创建表和完成命令的CSS方法。然而，有时人们需要一个纯粹的内联HTML方法来创建表，所提供的代码提供了建议。

可以实现居中的一种方法是通过align标签。table标签中的align命令使表格在页面上居中，“左”或“右”也会更改位置。

TR align=“居中”将对齐行中的文本。或者文本可以使用TH / TD标签单独居中(中、左、右)。

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

TH标签是可选的标题行。背景色可以在任何行或单元格中设置，也可以在表标记本身中设置。“透明”是一种安全的颜色，以确保使用页面的背景颜色。

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

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

~最懒的是使用BR标记，它创建一个换行符，相当于Shift-Enter键盘。BR在编码中占有一席之地，但不应该被过度使用。调整img style标签中的图像填充，为标题文本创建缓冲区空间。(第15行:00)

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

可以在文本周围交替使用'p‘或'h’标签；它们定义文本样式并创建新行(大致相当于Enter键盘)。

~推荐的方法是在单元格中使用一个小表格，其中包含图像和标题的单独行。图像填充和表格单元格填充和间距可以相应地调整。(第16行:00)

~或结合使用这两种方法为image1 +'br‘caption1和image2 +'br’caption2创建行。图像填充和表格单元格填充和间距可以相应地调整。(第17行:00)

为了便于查看，已应用了表格边框。

例如，在较大的表中设置了字体；但是，可以在样式表中轻松地定义字体，并使用各种命令标记实现它们。

希望这能有所帮助！

代码语言：javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/37764620

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档