339

In Visual Studio, I'm seeing these warnings:

  • Validation (HTML 5): Attribute 'cellpadding' is not a valid attribute of element 'table'.
  • Validation (HTML 5): Attribute 'cellspacing' is not a valid attribute of element 'table'.
  • Validation (HTML 5): Attribute 'valign' is not a valid attribute of element 'td'.
  • Validation (HTML 5): Attribute 'align' is not a valid attribute of element 'td'.

If they are not valid attributes in HTML5, what replaces them in CSS?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Code Maverick
  • 20,171
  • 12
  • 62
  • 114
  • 4
    I've found that even with HTML5, the cellpadding and cellspacing attributes are still required. That is to say, without explicitly declaring those attributes, the default padding and spacing are applied. Therefore, I find that I must always set them to the value of "0" in order to nullify the default values. It's possible that they've been deprecated but browsers have not yet picked up on them. The default values are still applied in Chrome version 37. – Aquarelle Sep 03 '14 at 22:01

4 Answers4

540
/* 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; }
Hector S.
  • 303
  • 3
  • 12
drudge
  • 35,471
  • 7
  • 34
  • 45
  • 6
    Its worth noting that border-spacing only seems to work when using this property on the table too "border-collapse:separate;" – Blowsie Aug 11 '11 at 15:00
  • 3
    @Samir -- Seems that a `float:right;` will do the trick. http://jsfiddle.net/HGFH7/ – drudge Feb 18 '14 at 00:35
71

This should solve your problem:

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 Tobin
  • 9,206
  • 15
  • 49
  • 74
  • FYI: moved from http://stackoverflow.com/questions/10367387/are-there-css-alternatives-to-the-deprecated-html-attributes-align-and-valign – Shog9 Jul 25 '14 at 18:57
15

On particular table

<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>
Xtian11
  • 2,130
  • 1
  • 21
  • 13
3

Alternatively, can use for particular table

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

Add this css in external file

.tableFormatter
{
width:100%;
vertical-align:top;
text-align:center;
}
Jaisankar
  • 453
  • 1
  • 5
  • 10