What Replaces Cellpadding, Cellspacing, Valign, and Align in HTML5 Tables

What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?

/* 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; }

How can I code cellspacing=0 so it is valid HTML5?

Well, use the border-collapse: collapse; CSS rule (which has the same effect: no space between table cells). Note that this may not work in older browsers like IE 5 or 6, so if you need to support them you are out of luck.

<table class="table" style="clear: both; border-collapse: collapse; width: 100%;">

Table width border cellspacing cellpadding all 0 in HTML5 error validation

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

Remove cellpadding ,cellspacing and border from table

I've had a similar problem with emails before. If I remember correctly, I fixed it by making the image (or try 'a' tag) inside the td use display: block.

Try something like this:

<td><img alt="Sample Image" style="display: block;" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>

How to align table-cells in HTML5?

With css: vertical-align and text-align respectively.

html5 compliant cellpadding in only some tables without editing td elements

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
.cell-pad th,.cell-pad td{padding:10px}
</style>
</head>

<body>
<p>Table without cellpadding:</p>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with cellpadding:</p>
<table cellpadding="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with css:</p>
<table class="cell-pad">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

What Replaces Cellpadding, Cellspacing, Valign, and Align in HTML5 Tables