Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
How to create a 4x4 grid table

Giulia

Newbie
Total Posts:  7
Posted: 20 October 2016 01:49 AM

Hi all,

I have another problem (and yes, I am not a HTLM expert). In this email I am not able to make this table work https://www.emailonacid.com/app/acidtest/display/summary/DRnHFYXVFWLsQu1NliqUefmxKdCs6Zf1bXrTCkXD8jtWM/shared

Somehow the different columns are not of the same size. What did I wrong???
I also have attached the HTML file.
pleaseeeee, HELP me!!!!!!

File Attachments
4x4 grid table.pdf  (File Size: 86KB - Downloads: 103)

 

leinverheij

Avatar
Newbie
Total Posts:  13
Posted: 20 October 2016 02:19 AM
[ # 1 ]

Hi!

In the first row you have the widths set to: width=“142”, width=“300”, width=“142”, width=“300”
While the second row only has width=“142” set for all 4 columns.

Also, there seem to be a stray <tbody> just before the first 4 column row, which shouldn’t be there.

The spacer below the 2 4 column rows misses the colspan=“4”:

<tr>
  <td height=“15” class=“em_spc_20”> </td>
</tr>

Personally I hate using colspan. I’d rather just start a new table to keep everything neat and tidy.

Hope this helps,
Lein


 

Giulia

Newbie
Total Posts:  7
Posted: 20 October 2016 07:44 AM
[ # 2 ]

Thank you for your help. However, the table didn’t change :( it’s still rendering oddly!


 

leinverheij

Avatar
Newbie
Total Posts:  13
Posted: 20 October 2016 07:02 PM
[ # 3 ]

Hi,

It’s always wise to validate your html in https://validator.w3.org/check so pick out any incorrect html.

I’ve found that you’ve written lots of css wrong. It’s font-family, font-size, line-height, mso-line-height-rule (with a dash in between the words). You seem to mix writing it correctly and incorrectly.

Also, just create separate tables instead of using the colspan. Because some tds have the colspan=“4” but other don’t while they should. It’s missing things up.

Remove padding from images, because that doesn’t work everywhere. Just put it on the tds the image is in.

I’ve cleaned up your html (see attached).  It’s probably not completely correct yet (some images aren’t working for me either). But it’s a step in the right direction smile

Cheers,
Lein

File Attachments
4x4grid.html  (File Size: 48KB - Downloads: 115)