¿Qué reemplaza el relleno de celdas, el espaciado de celdas, valign y alinear en tablas HTML5?

320

En Visual Studio , veo estas advertencias:

Validación (HTML 5): el atributo 'cellpadding' no es un atributo válido del elemento 'table'.

Validación (HTML 5): el atributo 'cellpacing' no es un atributo válido del elemento 'table'.

Validación (HTML 5): el atributo 'valign' no es un atributo válido del elemento 'td'.

Validación (HTML 5): el atributo 'alinear' no es un atributo válido del elemento 'td'.

Si no son atributos válidos en HTML5 , ¿qué los reemplaza en CSS?

— Code Maverick
fuente

44

Descubrí que incluso con HTML5, los atributos de relleno y espaciado de celdas siguen siendo necesarios. Es decir, sin declarar explícitamente esos atributos, se aplican el relleno y el espaciado predeterminados. Por lo tanto, encuentro que siempre debo establecerlos en el valor de "0" para anular los valores predeterminados. Es posible que hayan quedado en desuso, pero los navegadores aún no los han detectado. Los valores predeterminados todavía se aplican en Chrome versión 37.

— Aquarelle

496

/* cellpadding */
th, td { padding: 5px; }

/* cellspacing */
table { border-collapse: separate; border-spacing: 5px; } /* cellspacing="5" */
table { border-collapse: collapse; border-spacing: 0; }   /* cellspacing="0" */

/* valign */
th, td { vertical-align: top; }

/* align (center) */
table { margin: 0 auto; }

— esclava
fuente

66

Vale la pena señalar que el espacio entre bordes solo parece funcionar cuando se usa esta propiedad en la tabla también "border-collapse: separe";

— Blowsie

3

@Samir: parece que a float:right;hará el truco. jsfiddle.net/HGFH7

— esclavo

70

Esto debería solucionar tu problema:

td {
    /* <http://www.w3.org/wiki/CSS/Properties/text-align>
     * left, right, center, justify, inherit
     */
    text-align: center;
    /* <http://www.w3.org/wiki/CSS/Properties/vertical-align>
     * baseline, sub, super, top, text-top, middle,
     * bottom, text-bottom, length, or a value in percentage
     */
    vertical-align: top;
}

— Cole Johnson
fuente

FYI: movido de stackoverflow.com/questions/10367387/…

— Shog9

13

En una mesa en particular

<table style="border-collapse: separate; border-spacing: 10px;" >
    <tr>
      <td>Hi</td>
      <td>Hello</td>
    <tr/>
    <tr>
      <td>Hola</td>
      <td>Oi!</td>
    <tr/>
</table>

Expandir fragmento

— Xtian11
fuente

3

Alternativamente, puede usar para una mesa en particular

 <table style="width:1000px; height:100px;">
    <tr>
        <td align="center" valign="top">Text</td> //Remove it
        <td class="tableFormatter">Text></td>
    </tr>
</table>

Agregue este CSS en un archivo externo

.tableFormatter
{
width:100%;
vertical-align:top;
text-align:center;
}

— JaiSankarN
fuente

FYI: movido de stackoverflow.com/questions/10367387/…

— Shog9

1

CSS en línea no recomendado.

— Samuel Ramzan

Sí, tiene usted razón. No lo recomiendo. Vamos por un archivo css externo .ClassName {ancho: 100%; alinear texto: centro; vertical-align: top;} Gracias

— JaiSankarN