I know of two different methods to create responsive layouts in emails, but I was hoping someone could enlighten me and help me decide which would be better for future use.

Method 1: Setting table alignments

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" name="viewport" content="text/html; charset=utf-8; initial-scale=1" />
    <title>Method 1</title>
    <style type="text/css">
      @media only screen and (max-width:600px) {
        table[class=container], table[class=responsiveTable] {width: 100% !important;}
      }
    </style>
  </head>
  <body>
    <table class="container" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
      <tr>
        <td>
          <table class="responsiveTable" border="0" cellspacing="0" cellpadding="0" width="50%" align="left">
            <tr>
              <td bgcolor="#dddddd" align="center">FIRST COLUMN</td>
            </tr>
          </table>
          <table class="responsiveTable" border="0" cellspacing="0" cellpadding="0" width="50%" align="left">
            <tr>
              <td bgcolor="#aaaaaa" align="center">SECOND COLUMN</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Method 2: Making TD block elements:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" name="viewport" content="text/html; charset=utf-8; initial-scale=1" />
    <title>Method 2</title>
    <style type="text/css">
      @media only screen and (max-width:600px) {
        table[class=container], td[class=responsiveCell] {width: 100% !important;}
        td[class=responsiveCell] {display: block !important;}
      }
    </style>
  </head>
  <body>
    <table class="container" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
      <tr>
        <td>
          <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr>
              <td class="responsiveCell" bgcolor="#dddddd" width="50%" align="center">FIRST COLUMN</td>
              <td class="responsiveCell" bgcolor="#aaaaaa" width="50%" align="center">SECOND COLUMN</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>