340

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?

1
  • 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 3, 2014 at 22:01

4 Answers 4

541
/* 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; }
2
  • 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, 2011 at 15:00
  • 3
    @Samir -- Seems that a float:right; will do the trick. jsfiddle.net/HGFH7
    – drudge
    Feb 18, 2014 at 0: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;
}
1
16

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>

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;
}
3
  • FYI: moved from stackoverflow.com/questions/10367387/…
    – Shog9
    Jul 25, 2014 at 18:57
  • 1
    inline css not recommended. Dec 27, 2014 at 16:10
  • Yes you are right. i do not recommending. We go for external css file .ClassName{ width: 100%; text-align: center; vertical-align:top;} Thanks
    – Jaisankar
    Dec 29, 2014 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.