HTML table only dash in the middle - html

I would like to make a dash in the middle of a table.
The first picture shows my current state and the second picture shows how I would like it.
How do I get the line?
<table>
<tbody>
<tr>
<td>
<img src="https://thunder.cdn.overdrive.com/logos/crushed/1211.png?1" alt="Logo" />
</td>
<td>
<strong><font color=darkgrey>Tel.:</font></strong> <font color=grey>+44(0) XXX</font>
<br/>
<strong><font color=darkgrey>E-Mail:</font></strong> <font color=grey>xxx#xxx.com</font>
<br/>
<strong><font color=darkgrey>Web:</font></strong> <font color=grey>www.xxx.com</font>
</td>
</tr>
</tbody>
</table>

You just need to use border-left property to create a dotted grey line:
border-left: 2px dotted grey;
You will notice that that goes right on the text, so the next step is to add padding-left to move the text away from the dotted line.
Working example:
#add {
border-left: 2px dotted grey;
padding-left: 14px;
}
<table>
<tbody>
<tr>
<td>
<img src="https://thunder.cdn.overdrive.com/logos/crushed/1211.png?1" alt="Logo" />
</td>
<td id="add">
<strong><font color=darkgrey>Tel.:</font></strong> <font color=grey>+44(0) XXX</font>
<br/>
<strong><font color=darkgrey>E-Mail:</font></strong> <font color=grey>xxx#xxx.com</font>
<br/>
<strong><font color=darkgrey>Web:</font></strong> <font color=grey>www.xxx.com</font>
</td>
</tr>
</tbody>
</table>
You can do this inline as well:
<td style="border-left: 2px dotted grey; padding-left: 14px;">
It is also important to create an id as well and not just use td element or you will get this result:
td {
border-left: 2px dotted grey;
padding-left: 14px;
}
<table>
<tbody>
<tr>
<td>
<img src="https://thunder.cdn.overdrive.com/logos/crushed/1211.png?1" alt="Logo" />
</td>
<td>
<strong><font color=darkgrey>Tel.:</font></strong> <font color=grey>+44(0) XXX</font>
<br/>
<strong><font color=darkgrey>E-Mail:</font></strong> <font color=grey>xxx#xxx.com</font>
<br/>
<strong><font color=darkgrey>Web:</font></strong> <font color=grey>www.xxx.com</font>
</td>
</tr>
</tbody>
</table>
(two dotted lines will appear)

Related

HTML email design - Alternatives to putting an <a> tag around a <table>

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.

HTML - Table -vertical position text within cell

I would like to have text within a table cell to be positioned a little bit higher, near the top. Please take a look at the provided screenshot. You can see in the TD below Column 1 how I want it to look like:
https://jsfiddle.net/38f1aru6/1/
HTML:
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
CSS:
.td_content
{
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
}
I'm new to HTML and CSS... and a little bit shocked how complicated some simple styling can be.
My first guess was text alignment within a cell... vertical-align? Didn't work.
Then I tried to use an element with absolute positioning within an element with relative positioning. It did work ... almost ... but the text did flow out of the cell.
I would be very grateful if you could show me the right direction to solve this (easy?) task.
Edit:
I want to keep the yellow bar in the same position, but I want to move the text within the bar upward.
It seems from comments that you want to keep the yellow bar in the same position, but you want to move the text in it upward. That is not hard, but it does involve adding extra markup; otherwise it's impossible to separate the text from the background in that way. So, here you go.
.yellow_marked {
background-color: yellow;
}
table {
border: 1px solid black;
}
td, th {
border: 1px solid;
}
/* added css */
caption {
font-weight: bold
}
.yellow_marked>span {
position: relative;
top: -2px;
}
<table class="table_text">
<caption>
Title
</caption>
<tbody>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
</tr>
<tr>
<td>
<span class="td_content yellow_marked"><span>Cell content here</span></span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
Also, I'm sorry for changing your HTML, but you were using non-semantic markup for the title and the column headers, not to mention obsolete and unnecessary elements; couldn't bear to leave those in.
If you want, you can use the new CSS with the old HTML though.
you can use vertical-align:super on the span inside ( on .td-content )
see snippet below or jsFiddle
let me know if this is what you want
.td_content
{
vertical-align:super;
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
vertical-align:top works.
.td_content
{
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
height: 50px;
vertical-align: top; /* To move the text to the top */
padding-top: 5px; /* To create a gap at the top */
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
You could add the yellow background to the td instead. And then use a negative margin on the span element.
fiddle
.td_content {}
.yellow_marked {
background-color: yellow;
}
.yellow_marked span {
display: block;
margin-top: -4px;
}
table {
border: 1px solid black;
}
td {
border: 1px solid;
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td class="yellow_marked">
<span class="td_content">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>

How to remove table border on a single row?

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>

Custom css to format tr td but not if bold detected inside td

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>

spacing between table for html emails

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>