Maintain All Cell Alignments Across Adjacent Table Rows

In the three-column block below as I shrink the size of screen to adjust to mobile screens, the alignment between the header, the image and the text is no longer kept even though I

Solution 1:

Add valign="top" to the table cells themselves.

<tdvalign="top"><h3>Rätta dina uppgifter</h3></td>

Solution 2:

I don't understand why you're adding a height to tr.

Start with a basic table structure and add in the components you need. You would almost be better off creating a table for your title and a table for your table images. You'll find more consistent results with a structure like this:

<table>
  <tr>
    <td>*title table*</td>
  </tr>
  <tr>
    <td>*three table*</td>
  </tr>
</table>

The parent table will control the width align all of the other tables in one column.

If you want the images to be the same width, add max-width:value; to each image. Try a table format like this:

<tablerole="presentation"cellspacing="0"cellpadding="0"border="1"width="600"><tr><tdwidth="33%"valign="top"align="center"><h3>title</h3><ahref="#"><imgsrc="https://homepages.cae.wisc.edu/~ece533/images/watch.png"style="height: auto; max-width: 100px; display: block;"></a><p>Some text</p></td><tdwidth="33%"valign="top"align="center"><h3>title</h3><ahref="#"><imgsrc="https://homepages.cae.wisc.edu/~ece533/images/watch.png"style="height: auto; max-width: 100px; display: block;"></a><p>Some text</p></td><tdwidth="33%"valign="top"align="center"><h3>title</h3><ahref="#"><imgsrc="https://homepages.cae.wisc.edu/~ece533/images/watch.png"style="height: auto; max-width: 100px; display: block;"></a><p>Some text</p></td></tr>

If you're trying to do responsive email development and wish to see the table cells stack, I suggest looking up a responsive email template and following that instead. This sample will get your three column table working consistently.

Good luck.