如何格式化 html 单元格的内容

Question

我有一个 html table，我想填充一个应在左侧对齐的图标和应在右侧对齐的文本。

但是：

图像使用<p style="text-align:left但文本使用<span style="float:right;">似乎不太干净？有没有更优雅的方式？
当整个 table 不适合 window 时，它会换行，因此图像和相应的文本不再在同一行上，尽管 nowrap I放在每个单元格上。

Answer 1

  <table border="1" style="font-size: small; font-family: 'Arial'">
  <tbody>
    <tr>
     <th>  </th>
     <th> column A </th>
     <th> column A </th>
     <th> column A </th>
     <th> column A </th>
     <th> column A </th>
     <th> column A </th>
     <th> column A </th>
     <th> column A </th>
     <th> column B </th>
  </tr>
  <tr>
     <td align="right"> Row 1 </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="Desert.jpg" width="20" height="30"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">This text is on the left</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="Desert.jpg" width="20" height="30"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Other text on the left</span></p>

     </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">This text is on the left</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Other text on the left</span></p>

     </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">This text is on the left</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Other text on the left</span></p>

     </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">This text is on the left</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Other text on the left</span></p>

     </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">This text is on the left</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Other text on the left</span></p>

     </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">This text is on the left</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Other text on the left</span></p>

     </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">This text is on the left</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Other text on the left</span></p>

     </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">This text is on the left</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+"> <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Other text on the left</span></p>

     </td>
     <td nowrap="">
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/1x13/f00c3a/fafaff.png&amp;text=+">  <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Text</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/1x13/f00c3a/fafaff.png&amp;text=+">  <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Text</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/1x13/f00c3a/fafaff.png&amp;text=+">  <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Text</span></p>
        <p style="text-align:left;margin-top: 5px;margin-bottom: 5px;"><img src="http://dummyimage.com/1x13/f00c3a/fafaff.png&amp;text=+">  <span style="text-align:right;margin-top: 5px;margin-bottom: 5px;">Text</span></p>
     </td>

   </tr>
 </tbody>
  </table>

Answer 2

我有几个想法，具体取决于您要实现的目标 - 一种方法是在每个 table 单元格内使用 div，如下所示：

<td>
   <div class="container">
       <div class="left">
           <img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+">
       </div>
       <div class="right"><span>This text is on the left</span>
       </div>
   </div>
   <div class="container">
       <div class="left">
           <img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+">
       </div>
       <div class="right"><span>Other text on the left</span>
       </div>
   </div>
</td>

并使用 CSS classes 来操纵它们：

.left {
    width: 26px;
    float: left;
}
.right {
    padding-left: 28px;
    text-align: right;
}
.container {
    padding: 5px;
}

结果：Fiddle (full screen)

另一种方法是保持原样（删除内联代码）并在 table:

中添加 class

<table class="test-table">

...

<td>
    <p>
       <img src="http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+">
       <span>This text is on the left</span>
    </p>
    <p>
        <img src="http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+">
        <span>Other text on the left</span>
    </p>
</td>

并像这样使用 CSS：

.test-table > tbody > tr > td > p {
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
}

.test-table > tbody > tr > td > p > img {
    display: inline-block;

}

.test-table > tbody > tr > td > p > span {
    text-align: right;
}

结果：Fiddle (full screen)

编辑：或者您可以使用 <ul>:

<td>
    <ul class="test-ul">
        <li class="first-image"><span>This text is on the left</span></li>
        <li class="second-image"><span>Other text on the left</span></li>
    </ul>
</td>

CSS:

.test-ul {
    margin: 5px;
    padding: 0 0 0 30px;
}

.test-ul > .first-image {
    list-style-image: url('http://dummyimage.com/26x13/00b32d/fafaff.png&amp;text=+');
}

.test-ul > .second-image {
    list-style-image: url('http://dummyimage.com/21x13/00b32d/fafaff.png&amp;text=+');
}

.test-ul > .third-image {
    list-style-image: url('http://dummyimage.com/1x13/f00c3a/fafaff.png&amp;text=+');
}

Example

如何格式化 html 单元格的内容

how to format the content of a html cell

html

html-table

word-wrap