I am constructing a HTML email newsletter.
Within the email, i constructed a container table that will hold the actual content of the email; configured to 100% width.
i then built other tables, within the "outer container table" to hold different part of the message; these table are aligned next to each other/and below each other.
The issue
the issue is how to space the inner tables. i tried the standard inline css margin-left/padding-left spacing. but none seem to have an affect.
style=' margin-right: 20px;float: left;margin-bottom: 20px'
below is the sample table. please note that this example is contained within a properly formatted header and foooter(i did not show that part for brevity).
<table width="100%">
<tr>
<td width='300' style='float:left' style=' margin-right: 20px;float: left;margin-bottom: 20px'>
<TABLE>
<TR>
<TD width='150'>column</TD>
</TR>
</TABLE>
</td>
<td width='300' style='float:left' style=' margin-right: 20px;float: left;margin-bottom: 20px'>
<TABLE>
<TR>
<TD width='150'>column</TD>
</TR>
</TABLE>
</td>
<tr>
</table>
You have used style tag twice in your code. Just remove that and inner CSS will work.
Try this
<table width="100%" style='border:1px solid green;'>
<tr>
<td width='300' style='border:1px solid blue; margin-right: 20px;float: left; margin-bottom: 20px'>
<TABLE>
<TR>
<TD style='border:1px solid red;' width='150'>column</TD>
</TR>
</TABLE>
</td>
<td width='300' style='border:1px solid red;margin-right: 20px; float: left; margin-bottom: 30px'>
<TABLE>
<TR>
<TD width='150'>column</TD>
</TR>
</TABLE>
</td>
<tr>
</table>
Related
This question is very similar to How to link block level elements in html e-mails?, but that question is quite old and the solutions provided didn't fit my use-case. I'm working on an email template that shows a row of items each kept within a table with multiple rows. Each of the gray boxes is its own table.
<table cellpadding="4" cellspacing="4" style="table-layout:fixed; width:800px; margin: 0 auto;">
<tr>
<td style="background-color: #f3f3f3; border-color: #cfcfcf; vertical-align: top; border-style: solid; border-width: 1px">
<table cellpadding="0" style="table-layout:fixed; width:100%">
<tr>
<td style="color: #525252; vertical-align: top; height: 35px;"> Item 1 </td>
</tr>
<tr>
<td style="color: #525252; height: 150px"><img src="https://www.isdntek.com/gif/polaroid140.gif" style="height: 10px;" /></td>
</tr>
<tr>
<td> $9.99 </td>
</tr>
<tr>
<td> 20 bids </td>
</tr>
<tr>
<td> 20 watchers </td>
</tr>
</table>
</td>
<td style="background-color: #f3f3f3; border-color: #cfcfcf; vertical-align: top; border-style: solid; border-width: 1px">
<table cellpadding="0" style="table-layout:fixed; width:100%">
<tr>
<td style="color: #525252; vertical-align: top; height: 35px;"> Item 2 </td>
</tr>
<tr>
<td style="color: #525252; height: 150px"><img src="https://www.isdntek.com/gif/polaroid140.gif" style="height: 50px;" /></td>
</tr>
<tr>
<td> $9.99 </td>
</tr>
<tr>
<td> 20 bids </td>
</tr>
<tr>
<td> 20 watchers </td>
</tr>
</table>
</td>
<td style="background-color: #f3f3f3; border-color: #cfcfcf; vertical-align: top; border-style: solid; border-width: 1px">
<table cellpadding="0" style="table-layout:fixed; width:100%">
<tr>
<td style="color: #525252; vertical-align: top; height: 35px;"> Item 3 </td>
</tr>
<tr>
<td style="color: #525252; height: 150px"><img src="https://www.isdntek.com/gif/polaroid140.gif" style="height: 100px;" /></td>
</tr>
<tr>
<td> $9.99 </td>
</tr>
<tr>
<td> 20 bids </td>
</tr>
<tr>
<td> 20 watchers </td>
</tr>
</table>
</td>
<td style="background-color: #f3f3f3; border-color: #cfcfcf; vertical-align: top; border-style: solid; border-width: 1px">
<table cellpadding="0" style="table-layout:fixed; width:100%">
<tr>
<td style="color: #525252; vertical-align: top; height: 35px;"> Item 4 </td>
</tr>
<tr>
<td style="color: #525252; height: 150px"><img src="https://www.isdntek.com/gif/polaroid140.gif" style="height: 140px;" /></td>
</tr>
<tr>
<td> $9.99 </td>
</tr>
<tr>
<td> 20 bids </td>
</tr>
<tr>
<td> 20 watchers </td>
</tr>
</table>
</td>
</tr>
</table>
sample
Right now I have two anchor tags that link to the same place - one over the item title and one over the item image. I'm trying to reduce the number of links inside the email, so ideally I'd be able to place an anchor tag over the entire table and have the whole gray box be clickable.
Unfortunately, as mentioned in the SO post linked above, putting an anchor tag around a block element is not supported in email clients like Outlook. If you do that, nothing is clickable.
Here is a JS Fiddle with code snippets for:
Our original design with 2 links for each item.
The ideal design has an anchor tag around the whole table, but it is unusable due to Outlook.
A failed attempt to use span elements with br elements to maintain the look of the original.
If I can recreate the original design with inline elements I'd be willing to try that, but each item has a dynamic title and image, so I think I have to use fixed heights to make everything line up correctly.
If anyone has any advice or techniques, I'd really appreciate it. Thank you!
How about adding an onclick to the table like this
<table onclick="location.href='your location'">
<table onclick="window.location.href='your location'">
I think this will work.
I've been trying to mimic the following table layout using HTML/CSS:
NOTE: It's a table from LibreOffice Writer which I modified using Gimp to show you what I mean.
As you can see, I'd like to add some left padding to some rows to show visually that they are inside a group.
I tried using padding-left of both <td> and <tr>, and a little trick that don't work: applying 'border-left: 14px solid white' to the <tr> and then 'border-left: 15px solid black' to the first <td> in the row. I thought that the border in the <td> would overlap the <tr> border by 1px, but HTML rendering seems not to work that way :)
Also, I tried to do this:
<tr>
<td colspan="9">
GROUP 1
</td>
</tr>
<tr>
<td colspan="9" style="padding-left: 15px">
<table>
<tr>
<td> <!-- # --> </td>
<td> <!-- Id --> </td>
<td> <!-- Field1 --> </td>
(ETC)
<td> <!-- Comment --> </td>
</tr>
</table>
</td>
</tr>
The problem with this approach is that the column lines of the inside the 'group' don't match the ones that are outside so it doesn't look good...
Any suggestion?
Try this. Remove borders from table cells, instead add divs within each table cell with the border:
<tr>
<td colspan="4">
<div class="cell">GROUP 1</div>
</td>
</tr>
<tr>
<td style="padding-left: 15px">
<div class="cell"> col 1</div>
</td>
<td>
<div class="cell"> col 2</div>
</td>
<td>
<div class="cell"> col 3</div>
</td>
<td>
<div class="cell"> col 4</div>
</td>
</tr>
CSS:
div.cell {
border-left: 1px solid #000;
border-right: none;
border-bottom: none;
}
table {
border-collapse: collapse;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
table td {
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
See example here: https://codepen.io/anon/pen/baMdWP
Suggestion:
.with-padding {
margin-left: 10px;
}
<table class="normal">
...
</table>
<table class="with-padding">
...
</table>
<table class="normal">
...
</table>
Assign padding-left: 15px to every sub-sequent <tr> that is to be displayed as part of the group. It's better to use a class instead of applying inline style.
Try this way.
HTML
<table style="width:100%">
<tr>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<td colspan="9">
GROUP 1
</td>
</table>
<table style="width:95%;margin-left:5%">
<tr>
<td style="width:20%;">January</td>
<td style="width:25%;">$100</td>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
CSS
table,th,td {
border: 1px solid black;
}
I have a table with the following class:-
.multicolor {
border: 1px solid #000000;
}
and for one specific table row I wanted to remove the left and right borders, replacing them with top and bottom so that it looks like one table is ending and another is beginning. Here's how I was trying it and no any luck.
<tr style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<td colspan="7" style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<br></td>
</tr>
The top and the bottom borders are appearing but the side ones remain. Does anyone know if there is a way to override the inherited border property for that row?
try this.
table {
border-collapse:collapse;
}
td {
border:none;
}
You have to set border of your td or th "none";
May be this will help hide cells border using css
hello See the below fiddle as you mentioned the merge row I did this for both border and without border in the rows .hope it helps
<table>
<thead>
<tr>
<th class="col1">1</th>
<th class="col2">2</th>
<th class="col3">3</th>
</tr>
</thead>
<tr class="first">
<td>asdas</td>
<td>asdas</td>
<td >boooo</td>
</tr>
<tr class="second">
<td>asdas</td>
<td>asdas</td>
<td>asdas</td>
</tr>
</table>
see the below fiddle
fiddle demo
try this,working fine
<style>
.border {
border:solid 1px #000;
}
.border-head {
border-bottom:solid 1px #000;
}
</style>
<table width="300" border="0" cellpadding="0" cellspacing="0" class="border" >
<thead>
<tr>
<td class="border-head"> </td>
<td class="border-head"> </td>
<td class="border-head" > </td>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I dont know if this is possible but...I am trying to format a table with css, to have a specific look. This is for a wordpress site that will be updated by my client. The problem is that she is going to be copying/pasting tables with a specific format, and i want the table to have that format without her doing any extra work.
This is what i have so far.
I want the cells with the Bold text to not have a dotted line bellow them.
Right now i am formating the tr lines to add the dotted lines like this:
html
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong></td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong></td>
</tr>
.....
css
.dotted tr:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted tr:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
Is there a way i can do this without having to add a custom class tag for each that has the bold text in it ?
This is how i want it to look like, but this is all done manually...That's what i am trying to avoid.
ps: Sometimes the tables might have more than 1 'data' under the bold letters so its not always odd, even lines, when it comes to the 'title' and the 'plays' bellow them. (this is a site for musical plays)
-Thanks
#Manoj Kumar Yeah the bold items are always under colspan 2
Since you stated the above comment, I have a CSS hack for it.
Change your CSS to have dotted border only on td instead of tr elements.
Target the elements with colspan=2 with attribute selector to have no border.
table {
background: gray;
}
.dotted td:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td[colspan="2"] { /* Attribute selector */
border: 0 none;
}
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
</tbody>
</table>
I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:
<table style="border:solid;width: 100%">
<tr>
<td align="center">
<table style="border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:
<td style="text-align:center">
And this:
<td style="margin: 0 auto">
And the tables keeps in the left-side of the cell. Any suggestions?
You had the right idea with margin:auto 0; just take off the 0.
Working example: http://jsfiddle.net/cxnR8/
<table style="border:solid;width: 100%">
<tr>
<td>
<table style="margin:auto;border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But, more importantly, do you really need to use tables and in-line styling?
Center the table using the deprecated align="" attribute.
<table>
<tr>
<td>
<table align="center">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
Your seccond suggestion is correct. See this working example.
HTML:
<table class="outer">
<tr>
<td>
<table class="inner">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
.outer
{
width: 100%;
border: solid 1px red;
}
.inner
{
width: 25%;
margin: auto;
border: solid 1px blue;
}