texto - como se alinea a la derecha en html

Alinee a la derecha y alinee el texto a la izquierda en la misma celda de la tabla HTML

Question

Tengo una celda en una <table> HTML. Me gustaría que parte del contenido de la celda se justifique y parte se justifique a la derecha. es posible?

Answer 1

El estilo td no es necesario, pero hará que sea más fácil ver este ejemplo en el navegador

<table>
 <tr>
  <td style="border: 1px solid black; width: 200px;">
  <div style="width: 50%; float: left; text-align: left;">left</div>
  <div style="width: 50%; float: left; text-align: right;">right</div>
  </td>
 </tr>
</table>

Answer 2

Es posible, pero cómo depende de lo que estás tratando de lograr. Si es esto:

| Alineado a la izquierda alineado a la derecha | en una celda, entonces puedes usar divs flotantes dentro de la etiqueta td:

<td>
<div style=''float: left; text-align: left''>Left-aligned</div>
<div style=''float: right; text-align: right''>Right-aligned</div>
</td>

Si es | Alineado a la izquierda
Alineado a la derecha |

Entonces la solución de Balon es correcta.

Si es: | Alineado a la izquierda | Alineado a la derecha |

Entonces es:

<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>

Answer 3

La respuesta de Tor Valamo con una pequeña contribución de mi lado: use el atributo "nowrap" en el elemento "td", y puede eliminar la especificación de "ancho". Espero eso ayude.

<td nowrap>
  <div style="float:left;">this is left</div>
  <div style="float:right;">this is right</div>
</td>

Answer 4

Podría usar algo como:

<td> 
  <div style="float:left;width:49%;text-align:left;">this is left</div> 
  <div style="float:right;width:49%;text-align:right;">this is right</div> 
</td>

El 49% es para dar un poco de espacio para que el renderizador ajuste las cosas.

Y puedes usar <div> o <span>

Answer 5

Quieres decir así?

<!-- ... --->
<td>
   this text should be left justified
   and this text should be right justified?
</td>
<!-- ... --->

En caso afirmativo

<!-- ... --->
<td>
   <p style="text-align: left;">this text should be left justified</p>
   <p style="text-align: right;">and this text should be right justified?</p>
</td>
<!-- ... --->

Answer 6

Se me ocurrió esto al tratar de descubrir cómo mostrar la moneda (''$'' a la izquierda, número a la derecha) en las celdas de la tabla:

<div class="currency">20.34</div>

.currency {
   text-align: right;
   width: 100%;
}

.currency:before {
   content: "$";
   float: left;
}

Answer 7

Si los quieres en líneas separadas, haz lo que dijo Balon. Si quieres que estén en la misma línea, hazlo:

<td>
  <div style="float:left;width:50%;">this is left</div>
  <div style="float:right;width:50%;">this is right</div>
</td>

Answer 8

seguro, pero debe envolver esos "bloques" en etiquetas separadas y aplicar la alineación a esos.