Mejor manera de alinear a la derecha el texto en una tabla HTML

Question 1

Tengo una tabla HTML con una gran cantidad de filas y necesito alinear una columna a la derecha.

Conozco las siguientes formas,

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

y

<tr><td>..</td><td>..</td><td class="right-align-class">10.00</td><tr>

En ambos métodos, tengo que repetir el parámetro de alineación o clase en cada <tr> etiqueta. (Si hay 1000 filas, tengo que poner alinear = ‘derecha’ o class=”clase-alineada-derecha” 1000 veces.)

¿Hay una manera eficiente de hacer esto? * ¿Hay una forma directa de decir, alinear la tercera columna en todas las filas a la derecha?

Question 2

Actualizado (¡después de más de 10 años!): ¡Sí! Es posible hacer esto de manera más eficiente ahora, con un amplio soporte práctico de navegador, usando el nth-child selector.

HTML:

<table>
<tr>
<td>foo 1</td>
<td>bar 1</td>
<td>baz 1</td>
<td>bap 1</td>
</tr>
<tr>
<td>foo 2</td>
<td>bar 2</td>
<td>baz 2</td>
<td>bap 2</td>
</tr>
</table>

CSS:

table td { width: 20em; border: 1px solid black; }
table td:nth-child(3) { text-align: end; }

https://jsfiddle.net/mv83qszL/

Anteriormente, no era posible hacer esto, porque el soporte del navegador solía ser inconsistente y impredecible, especialmente con respecto a las funciones CSS más nuevas. Esto hizo que fuera imposible utilizar soluciones más elegantes y eficientes, y requería muchas definiciones de clase y marcas repetitivas para obtener resultados consistentes en todo el espacio del navegador de la audiencia.

Consulte el historial de edición de la versión anterior de esta respuesta.

Question 3

Podrías usar el nth-child pseudo-selector. Por ejemplo:

table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

Luego en tu tabla haz:

<table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

Desafortunadamente, esto solo funciona en Firefox 3.5. Sin embargo, si su tabla solo tiene tres columnas, puede usar el selector de hermanos, que tiene un soporte de navegador mucho mejor. Así es como se vería la hoja de estilo:

table.align-right-3rd-column td + td + td
{
  text-align: right;
}

Esto coincidirá con cualquier columna precedida por otras dos columnas.

Question 4

Si siempre es la tercera columna, puede usar esto (suponiendo que la clase de tabla sea “productos”). Sin embargo, es un poco complicado y no es robusto si agrega una nueva columna.

table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

Pero honestamente, la mejor idea es usar una clase en cada celda. Puedes usar el col elemento para establecer el ancho, el borde, el fondo o la visibilidad de una columna, pero no cualquier otra propiedad. Las razones se discuten aquí.

Question 5

Mirando a través de tu exacto pregunta a tu implícito problema:

Paso 1: use la clase como lo describió (o, si es necesario, use estilos en línea).

Paso 2: activa la compresión GZIP.

Funciona de maravilla 😉

De esta manera, GZIP elimina la redundancia por usted (por cable, de todos modos) y su fuente sigue cumpliendo con los estándares.

Question 6

Hace varios años (en IE solo unos días) estaba usando el <col align="right"> etiqueta, pero lo acabo de probar y parece ser una función exclusiva de IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
</head>
<body>
    <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>
</body>
</html>

El fragmento está tomado de www.w3schools.com. Por supuesto, no debe usarse (a menos que por alguna razón realmente apunte solo al motor de renderizado de IE), pero pensé que sería interesante mencionarlo.

Editar:

es decir, todavía lo apoya.
Firefox ha eliminado el soporte en 3.5.
Safari no parece admitirlo, pero el la documentación indica lo contrario.

En general, no entiendo el razonamiento detrás del abandono de esta etiqueta. Parecería ser muy útil (al menos para la publicación manual de HTML).

Question 7

HTML5 arruinó la funcionalidad del atributo col …

Es realmente desagradable que HTML5 deje de usar la mayoría de los col atributos y no agregó el soporte para el style y class atributos Los navegadores modernos todavía tiene apoyo para su width atributo, pero no para los demás. El soporte de ancho probablemente aguantará ya que se usa en disposición de la mesa algoritmo de renderizado.

…que se puede arreglar definiendo series de clases CSS…

Para lograr una funcionalidad similar sin la necesidad de editar cada fila, se puede lograr definiendo

.right-1 td:nth-child(1),
.right-2 td:nth-child(2),
.right-3 td:nth-child(3),
.right-4 td:nth-child(4),
.right-5 td:nth-child(5), ...
  { text-align: right; }

que puede ser una sola línea con la ayuda de algún preprocesador/generador de CSS, pero aún aceptable sin él, ya que la mayoría de las tablas web tienen una cantidad razonable de columnas. Luego, para alinear a la derecha la tercera columna, puede simplemente

<table class="right-3">
...
</table>

… pero es solo un truco pobre 🙁

Las clases CSS deben contener la semántica. Si implican estilos particulares (como en el ejemplo anterior), semánticamente solo se legaliza en línea style atributo, fusionando el HTML con el diseño (CSS debería separarlo). Esto es lo que hacen los estilos Bootstrap, y esto es lo que debes evitar si es posible.

Question 8

El borrador actual de Selectores CSS Nivel 4 especifica selectores estructurales para rejillas. Si se implementa, podremos hacer cosas como:

th.price,
th.price || td {
    text-align: right;
}

Por supuesto, eso no nos ayuda hoy; las otras respuestas aquí ofrecen suficientes consejos prácticos para eso.

HTML5 arruinó la funcionalidad del atributo col …

…que se puede arreglar definiendo series de clases CSS…

… pero es solo un truco pobre 🙁

¿Ha sido útil esta solución?