Mailchimp applies the table's border in the whole template design - html

Mailchimp is so frustrating. I'm trying to make a campaign with the template that I did. It's supposed to look like this:
BUT when I'm trying to paste a table that I copied from google sheets, it's looking like this
How do I fix it? How can I make the borders disappear every time I'm going to paste a table?
If you're wondering this is the source code (I removed the content because it's classified and it exceeded the 30,000 characters limit):
<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
</style>
<table border="1" cellpadding="0" cellspacing="0" dir="ltr">
<colgroup>
<col width="277" />
<col width="100" />
<col width="100" />
<col width="113" />
<col width="114" />
<col width="49" />
<col width="79" />
<col width="2" />
<col width="100" />
<col width="100" />
</colgroup>
<tbody>
<tr>
<td data-sheets-value="{"1":2,"2":"AS OF: 8/29/16"}">AS OF: 8/29/16</td>
<td colspan="6" data-sheets-value="{"1":2,"2":"DIGITAL CARDS / CODES\n Official Pins or Scans with Text"}" rowspan="1">DIGITAL CARDS / CODES<br />
Official Pins or Scans with Text</td>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"PHYSICAL CARDS\n Free shipping on 500+ units"}" rowspan="1">PHYSICAL CARDS<br />
Free shipping on 500+ units</td>
</tr>
<tr>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"< 100 Units"}" rowspan="1">< 100 Units</td>
<td colspan="2" data-sheets-value="{"1":2,"2":"100+ Units\n Call/Email for pricing on 1000+ units per item"}" rowspan="1">100+ Units<br />
Call/Email for pricing on 1000+ units per item</td>
<td colspan="2" data-sheets-value="{"1":2,"2":"Format"}" rowspan="1">Format</td>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"Call/Email for pricing\n on 1000+ units per item"}" rowspan="1">Call/Email for pricing<br />
on 1000+ units per item</td>
</tr>
<tr>
<td> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
<td data-sheets-value="{"1":2,"2":"Pins"}"> </td>
<td data-sheets-value="{"1":2,"2":"Scans + Text"}"> </td>
<td> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
</tr>
<tr>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0",1]" data-sheets-value="{"1":3,"3":10}"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.15}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.085}"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.1}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.09}"> </td>
<td data-sheets-value="{"1":2,"2":"\u25cf"}"> </td>
<td> </td>
<td> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.1}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.09}"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0",1]"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

table border applied change border="0"
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">

Step 1: set each <table> to border="0"
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
Step 2: delete the commented-out td {border: 1px solid #ccc;}
You should now have no borders anywhere, so go back and add only the borders you want with inline styles on either <td>s (best) or <table>s. Eg:
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
<tr>
<td style="border-top: 1px solid #ffffff;">
content
</td>
</tr>
</table>
This should produce an email with no unintentional borders anywhere. I'm not sure what pasting from Google Sheets is like, but you'll want to edit the HTML in this way to make sure it displays correctly.

Related

Colspan styling in nested tables failed

I have a problem with nested tables. In my Company we have an old website wich is based on an table layout. I want to add dynamicaly a new td in one tr. If this td is set, in the other tr's i will set on the last td a colspan=2.
If i do this, my table looks like this:
|----|-|-------|--|---|-|-|
|----|-|-------|--|---|-|-|
|----|-|-------|--|---|-|-|
instead of looking like this:
|---|-|----|--|---|-|-----|
|---|-|----|--|---|-|-----|
|---|-|----|--|---|-|-----|
( - only defined as width not as colspan)
This is sample markup from my code:
<table border="0" width="100%" cellspacing="0" cellpadding="1">
<tbody>
<!-- Headline tr -->
<tr>
<td width="100%" valign="middle" nowrap align="left" colspan="7">
Titel
</td>
<!-- New dynamic Field -->
<td nowrap align="right">
<img src="example.gif" width="15px" height="15px"/>
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
</tbody>
</table>
This table is nested in a table with <table width="100%" height="100%">
Whats the failure?
You can't have a different number of td in rows (tr) from the same parent table.
In your example, you have 8 (7+1) td in your first row and only 7 (5+2) in both others.
It may break your table..
I have solved the problem. In my First row, the first td with colspan=7 dont need the width="100%". Now its functional.

Table Cells with different widths in different rows

I am weak in CSS, and I am trying to put a table in my html page, it has two rows and five columns per row(of course it is simplified), and it should look like this (the table is a hand-drawing table, it does not come so precise, I`m sorry for that.):
But mine looks like this:
This is my code:
<table border="1">
<tr>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:25px"> </td>
</tr>
<tr>
<td style="width:25px"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
</tr>
</table>
Code in jsfiddle is here.
NOTE:Any styles could be added, but structure of table could not be changed.
My problem is not the border style of table, but the width of cells, it seems that cells has a erratic width, I hope the right-border of first cell in second row could reach to the middle of bottom-border of first cell in first row, and the right-border of first cell in first row could reach to the middle of top-border of second cell in second row, so is others.
I have tried my best, but it still does not work. How could I do to match the requirement? Any suggestion will be appreciated. Thanks in advance.
You can use a <colgroup> element to achieve this:
<table border="1">
<colgroup>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
</colgroup>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
It will tell the table that there are 9 columns and each row will span the columns as you originally had.
There are other non-table ways to acheive what you are looking for. Here is one quick example:
<div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
div.row
{
clear:both;
}
div div div
{
width: 50px;
border-width: 1px;
border-style: solid;
border-color: black;
display: inline-block;
float: left;
margin: -1px;
}
div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
width: 25px;
}
Use tables within tables..
<table>
<tr>
<td>
<table border="1">
<tr>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:25px"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td style="width:25px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
</tr>
</table>
</td>
</tr>
</table>
This way you will never have that problem...
For this to work, you need to have at least one row that defines the width of individual cells (ones that are not using cellspans):
http://jsfiddle.net/cR2qd/7/1
HTML:
<body>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
CSS:
td {
width: 25px;
}

How to split a cell into columns so they have the same width as columns below them in a row

I have the following table, with two header cells. The second header cell needs to be split into two rows, with the bottom row split further into 6 columns (q1, q2, q3 etc). These columns should be the same width as those in the row below them. Please see the image and fiddle to see what I am trying to achieve. Any help would be great.
http://jsfiddle.net/CPSs9/
Fiddle here http://jsfiddle.net/CPSs9/
My code is as follows:
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<th width="120">Booboo</th>
<th colspan="5">blah blah</th>
</tr>
<tr>
<td> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
It is very easy. All you need to do is use the rowspan attribute on the first th and add another row to the table. Like so: http://jsfiddle.net/skip405/CPSs9/1/

HTML Table element alignment

I am trying to figure out how to have a row of a table with two td tags stay on top of another row with only one td tag and align perfectly. I've tried colspan="2" on the bottom row but that doesn't work.
Here is what I have so far:
<table cellpadding="0" cellspacing="0" border="0" width="800"><!--wrapper-->
<table border="1">
<tr>
<td style="width: 50px"><img src="images/img1.jpg" />
</td>
<td><img src="images/img2.jpg" />
</td>
</tr>
<tr colspan="2">
<td><img src="images/img3.jpg" />
</td>
</tr>
</table>
</table>
Change
<tr colspan="2">
<td><img src="images/img3.jpg" />
</td>
to
<tr>
<td colspan="2"><img src="images/img3.jpg" />
</td>
The colspan should be on the td
colspan belongs on the <td> not the <tr>
<table cellpadding="0" cellspacing="0" border="0" width="800">
<!--wrapper-->
<table border="1">
<tr>
<td style="width: 50px">
<img src="images/img1.jpg" />
</td>
<td>
<img src="images/img2.jpg" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/img3.jpg" />
</td>
</tr>
</table>
</table>
jsFiddle example

top align in html table?

how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>
Some CSS :
table td, table td * {
vertical-align: top;
}
<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>