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?

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

Antworten:

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