imagenes - tablas en html5

Alinear texto en un encabezado de tabla

Question

Parece que align no está funcionando para el th elemento. Aquí está mi HTML:

<div style="width: 100%; height: 175px; overflow: auto;">
<table class="grid" id="table">
<thead>
<tr>
<th class="not_mapped_style" style="display: none;" align="center">id</th>
<th class="not_mapped_style" align="center">DisplayName</th>
<th align="center">PrimaryEmail</th>
<th align="center">Age</th>
<th align="center">Phone</th>
</tr>
</thead>
<caption>Contacts</caption>
<tbody>
<tr>
<td style="display: none;" property_value="0" property_name="id" align="center">0</td>
<td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
<td property_value="[email protected]" property_name="PrimaryEmail" align="center">[email protected]</td>
<td property_value="69" property_name="Age" align="center">69</td>
<td property_value="[phone]" property_name="Hand_Phone" align="center">+18007</td>
</tr>
</tbody>
</table>
</div>

La alineación de texto está funcionando bien para los elementos td , pero falla para el th . ¿Por qué?

Answer 1

En HTML5 , la manera más fácil y rápida de centrar su <th>THcontent</th> es agregar un colspan como este:

<th colspan="3">Thcontent</th>

Esto funcionará si tu tabla tiene tres columnas. Entonces, si tiene una tabla de cuatro columnas, agregue un colspan de 4, etc.

Puede administrar la ubicación además en el archivo CSS mientras ha puesto su colspan en HTML como dije.

th {
text-align: center; /* Or right or left */
}

Answer 2

HTML:

<tr>
<th>Language</th>
<th>Skill Level</th>
<th>&nbsp;</th>
</tr>

CSS:

tr, th {
padding: 10px;
text-align: center;
}

Answer 3

Intenta usar el estilo para th

th {text-align:center}

Answer 4

Intenta usar text-align en el atributo de estilo para alinear el centro.

<th class="not_mapped_style" style="text-align:center">DisplayName</th>

Answer 5

Para mí, ninguno de los anteriores funcionó. Creo que es porque tengo dos niveles de encabezado y un ancho fijo en el nivel 1. Así que no pude alinear el texto dentro de las columnas correspondientes en el nivel 2.

+---------------------------+
| lvl 1 |
+---------------------------+
| lvl 2 col a | lvl 2 col b |
+---------------------------+

Tuve que usar la combinación de ancho: automático y texto: alinear-centro:

<th style="width:auto;text-align:center">lvl 2 col a</th>
<th style="width:auto;text-align:center">lvl 2 col b</th>

Answer 6

Si quieres centrar el th de todas las tablas:
table th{ text-align: center; }

Si solo quieres centrar el final de una tabla con una identificación determinada:
table#tableId th{ text-align: center; }

Answer 7

Su código funciona, pero usa métodos obsoletos para hacerlo. Debería usar la propiedad CSS text-align para hacer esto en lugar de la propiedad de alineación. Aun así, debe ser su navegador u otra cosa que lo afecte. Prueba esta demostración en Chrome (tuve que deshabilitar normalize.css para que se procesara).

• Fuente: http://jsfiddle.net/EDSWL/
• Demostración: http://jsfiddle.net/EDSWL/show

Answer 8

Tratar:

text-align: center;

Puede estar familiarizado con el atributo de alineación de HTML (que se ha suspendido a partir de HTML 5). El atributo de alineación podría usarse con etiquetas como

<table>, <td>, and <img>

para especificar la alineación de estos elementos. Este atributo le permitió alinear elementos horizontalmente. HTML también tiene / tenía un atributo valign para alinear elementos verticalmente. Esto también ha sido descontinuado de HTML5.

Estos atributos se suspendieron a favor del uso de CSS para establecer la alineación de los elementos HTML.

En realidad, no hay una propiedad de alineación de CSS o validación de CSS. En cambio, CSS tiene la alineación de texto que se aplica al contenido en línea de los elementos de nivel de bloque, y la propiedad de alineación vertical que se aplica al nivel en línea y las celdas de la tabla.