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

Question

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

我试过这个：http://jsfiddle.net/vLpazdf7/

然而：

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

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

我有几个想法取决于你究竟想要实现的目标 - 一种方法是在每个表格单元格中使用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类来操作它们：

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

结果：Fiddle（full screen）

另一种方法是保持原样（删除内联代码）并在表中添加一个类：

<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&text=+');
}

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

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

Example