Was ersetzt Cellpadding, Cellspacing, Valign und Align in HTML5-Tabellen?

320

In Visual Studio werden folgende Warnungen angezeigt:

Validierung (HTML 5): Das Attribut 'cellpadding' ist kein gültiges Attribut des Elements 'table'.

Validierung (HTML 5): Das Attribut 'cellspacing' ist kein gültiges Attribut des Elements 'table'.

Validierung (HTML 5): Das Attribut 'valign' ist kein gültiges Attribut des Elements 'td'.

Validierung (HTML 5): Das Attribut 'align' ist kein gültiges Attribut des Elements 'td'.

Wenn sie in HTML5 keine gültigen Attribute sind , was ersetzt sie in CSS?

— Code Maverick
quelle

4

Ich habe festgestellt, dass auch mit HTML5 die Attribute "cellpadding" und "cellspacing" weiterhin erforderlich sind. Das heißt, ohne diese Attribute explizit zu deklarieren, werden die Standardauffüllung und der Standardabstand angewendet. Daher muss ich sie immer auf den Wert "0" setzen, um die Standardwerte aufzuheben. Es ist möglich, dass sie veraltet sind, aber die Browser haben sie noch nicht erkannt. Die Standardwerte werden weiterhin in Chrome Version 37 angewendet.

— 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; }

— schuften
quelle

6

Es ist erwähnenswert, dass der Randabstand nur zu funktionieren scheint, wenn diese Eigenschaft auch für die Tabelle verwendet wird.

— Blowsie

3

@ Samir - Scheint, dass ein float:right;Wille den Trick macht. jsfiddle.net/HGFH7

— drudge

70

Dies sollte Ihr Problem lösen:

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
quelle

Zu Ihrer

— Information

13

Auf einem bestimmten Tisch

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

Erweitern Sie das Snippet

— Xtian11
quelle

3

Alternativ kann für bestimmte Tabelle verwendet werden

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

Fügen Sie diese CSS in einer externen Datei hinzu

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

— JaiSankarN
quelle

Zu Ihrer

— Information

1

Inline-CSS nicht empfohlen.

— Samuel Ramzan

Ja, du hast recht. Ich empfehle nicht. Wir gehen für externe CSS-Datei .ClassName {width: 100%; Textausrichtung: Mitte; vertikal ausrichten: oben;} Danke

— JaiSankarN