htmlcssweb

Table width border cellspacing cellpadding all 0 in HTML5 error validation

I need to use tables for some data but I am changing everything to HTML5 and new CSS. The problem is that those HTML5 validators are giving me validation problems with my tables

Here is my table

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200"  align="left" valign="top"> TD 1 must be 200px width </td>
    <td width="200"  align="left" valign="top"> TD 2 must be 200px width </td>
    <td width="200"  align="left" valign="top"> TD 3 must be 200px width </td>
  </tr>
</table>

I tried some CSS but cannot make it to work. What I need is to have a table 600px width, 1 TR and 3 TD, each TD must be exactly 200px (600px / 3 = 200 each )

Tested adding style="align:left; valign:top;" but it does not work. Neither the cellspacing or cellpadding. Need no cellspacing no cellpadding no border but I don´t know how to achieve it ...

Any ideas?

Looked some info online but I only see new way of CSS to add collapse or something but I cannot really understand how to do without any spacing or padding

Solution

  • You could avoid all those attributes with

    table {
  border-collapse: collapse;
  width: 600px;
}

table td {
  vertical-align: top;
  text-align: left
}

    and write a simpler markup

    <table>
  <tr>
    <td>TD 1 must be 200px width </td>
    <td>TD 2 must be 200px width </td>
    <td>TD 3 must be 200px width </td>
  </tr>
</table>

    Example: http://codepen.io/anon/pen/LVVEmw (border inserted just for clarity purpose)

    As you can see every cell is automatically 200px wide enter image description here