¿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?

html css visual-studio css-tables 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

Respuestas:

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