I am generating some html-formatted emails and I want the email body to be inside a thin, grey rectangle, like this:
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<table style="border:none; width:840pt; border-collapse:collapse;">
<thead>
<tr>
<td colspan="3" style="background:rgb(231, 230, 230);height:10pt"></td>
</tr>
<tr>
<td style="width:10pt; background:rgb(231, 230, 230);"></td>
<td style="width:820pt;">
<table>
<tbody>
<tr>
<th style="width:800pt; text-align: left;">
<p class="p1">Title goes here...</p>
<p class="p2">Subtitle goes here...</p>
</th>
<th>
<p><img class="img1" src="C:\...." alt="image goes here" style="margin: 0px; align: right"></p>
</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 10pt;background: rgb(231, 230, 230);"></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:10pt; background:rgb(231, 230, 230);"></td>
<td>
<p>email body goes here...<br><br></p>
</td>
<td style="width:10pt; background:rgb(231, 230, 230);"></td>
</tr>
<tr>
<td colspan="3" style="background:rgb(231, 230, 230);height:10pt;"></td>
</tr>
</tbody>
</table>
Problem is, the rectangle causes indentation visible in the preview pane in Outlook:
Any ideas how this can be prevented so that it looks like in the previous message?
Related
Need help with this:
So far with my current knowledge, I was able to design till here but it looks wrong and something is missing.
My code -
<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
<table border=2cellspacing=4cellpadding=4 border color dark="red" border color light="blue"
align="center">
<caption>List of Books</caption>
<tr>
<th row span=2align="center">ItemNo</th>
<th row span=2align="center">ItemName</th>
<th align="center"colspan=2>Price</th>
</tr>
<tr>
<th align="center">Rs.</th>
<th align="center">Paise</th>
</tr>
In HTML, you need to enclose the values for the attributes in doublequotes, no matter what it is (integer, string, functions, etc.) i.e.
<tr rowspan="3"></tr>
<span class="short"></span>
<button onclick="jump()"></button>
In the table, there's no such attribute called row span and col span. It's rowspan and colspan.
If you want to set the padding that's same across all cells in the table, you can simply add it to <style> and use CSS for it. If all cells have different styles, you can also apply the attribute style for each th and td.
<style>
td, th {
padding: 10px;
}
</style>
<table border="2">
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Price</th>
</tr>
<tr>
<th>Rs.</th>
<th>Paise</th>
</tr>
</table>
Here is your code:
<html>
<head>
</head>
<body>
<table align="center" border="1" cellspacing="0">
<caption>List of Books</caption>
<tr>
<th style="padding: 10px" rowspan="2">ItemNo</th>
<th style="padding: 10px" rowspan="2">ItemName</th>
<th style="padding: 10px" colspan="2">Price</th>
</tr>
<tr>
<td style="padding: 10px">Rs.</td>
<td style="padding: 10px">Paise</td>
</tr>
<tr>
<td style="padding: 10px">1</td>
<td style="padding: 10px">Programming in Python</td>
<td style="padding: 10px">500</td>
<td style="padding: 10px">50</td>
</tr>
<tr>
<td style="padding: 10px">2</td>
<td style="padding: 10px">Programming in Java 30</td>
<td style="padding: 10px">345</td>
<td style="padding: 10px">00</td>
</tr>
</table>
</body>
I'm having trouble with getting the height of the leftmost (commented) nested table to automatically size in correspondence with the content on the right. It looks fine in Chrome, but in Word/Outlook it's not stretching.
Does anyone know how to get this working in Word/Outlook?
how it should look
how it actually looks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
th, td {
padding: 0;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
.borderOutline {
border: 4px solid #000000;
}
</style>
</head>
<body>
<table class="border" align="center" width="588" height="100%">
<tbody>
<tr valign="top">
<td width="12">
<!--PROBLEM TABLE START-->
<table class="border" width="100%" height="100%">
<tbody>
<tr bgcolor="red"><td> </td></tr>
<tr bgcolor="orange"><td> </td></tr>
<tr bgcolor="yellow"><td> </td></tr>
<tr bgcolor="green"><td> </td></tr>
<tr bgcolor="blue"><td> </td></tr>
<tr bgcolor="purple"><td> </td></tr>
</tbody>
</table>
<!--PROBLEM TABLE END-->
</td>
<td width="576">
<table class="border" width="100%" height="100%">
<tbody>
<tr height="75">
<td class="borderOutline">
<table cellspacing="20" cellpadding="20">
<tbody>
<tr>
<td>HEADER</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="borderOutline">
<table cellspacing="20" cellpadding="20">
<tbody>
<tr>
<td>
<p>BODY</p>
<p>will</p>
<p>contain</p>
<p>variable</p>
<p>amount</p>
<p>of</p>
<p>text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr height="75">
<td class="borderOutline">
<table cellspacing="20" cellpadding="20">
<tbody>
<tr>
<td>FOOTER</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The problem you have is acutally quite common and annoyed a lot of people in the past.
As far as I know, Word and Outlook are using the Internet Explorer Engine, so you will find the unconvinient answer in this thread:
IE display: table-cell child ignores height: 100%
(SPOILER: It's probably not possible)
I have started to draw a table in HTML. I desired to draw
Observe that 2.2 starts at center of 1.1 and 3.1 starts at center of 2.2.
The code I wrote for this is
<table border="3" width="400" height="200">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
You can see the output. Can any one tell me why the output is not as i desired by suggesting the changes in the code. Thanks in advance.
After going through the comments I found that code is working fine in chrome. Problem is only in Firefox and Edge.
I think you will need to specify cell height in order to get this work.
table {
text-align:center;
border-collapse:collapse;
}
<table border="3" width="400" height="200">
<tr>
<td height="40" rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
Try this style
<style media="screen">
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
.center {
text-align: center;
}
</style>
and your code for table,
<table width="400" height="200">
<tr>
<td rowspan="2">
<div class="center"> 1.1 </div>
</td>
<td>
<div class="center"> 1.2 </div>
</td>
</tr>
<tr>
<td rowspan="2">
<div class="center"> 2.2 </div>
</td>
</tr>
<tr>
<td>
<div class="center"> 3.1 </div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="center"> 4.1 </div>
</td>
</tr>
<table>
use border-collapse: collapse; to table style
try this code
table{
border-collapse: collapse;
}
td{
text-align:center;
}
<table border="3" width="500" height="300">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
your code is written fine for rowspans, check this if it helps
<table border="3" width="400" height="200">
<tr>
<td rowspan="3">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="3">2.2</td>
</tr>
<tr>
<td style="border: none;"></td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
I wanted it to have a table which was half red and half blue, with some padding between the borders and the text. I just can't figure out why the padding property isnt apply in this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Practice Exercise </title
<style>
.red{background-color:red}
.blue{background-color:blue}
table{border-collapse:collapse;padding:40px;}
</style>
</head>
<body>
<table border ="1">
<tr>
<th class="red"> State </th>
<th class="blue"> Capital </th>
</tr>
<td class="red"> Utah </td>
<td class="blue"> Salt Lake City </td>
</tr>
<td class="red"> Texas </td>
<td class="blue"> Austin </td>
</tr>
<td class="red"> Tennesse </td>
<td class="blue> Nashville </td
</tr>
</table>
</body>
</html>
You had a lot of typos in you markup:
i will point them all up.
<table border="1">
<tr>
<th class="red">State</th>
<th class="blue">Capital</th>
</tr>
<tr> <!-- missing -->
<td class="red">Utah</td>
<td class="blue">Salt Lake City</td>
</tr>
<tr> <!-- missing -->
<td class="red">Texas</td>
<td class="blue">Austin</td>
</tr>
<tr> <!-- missing -->
<td class="red">Tennesse</td>
<td class="blue">Nashville</td> <!-- missing one " after blue, and one > after </td -->
</tr>
</table>
also: you applied the padding on the table, you should have applied it on the td, th like this:
CSS
td, th
{
padding: 5px;
}
Working Fiddle
I would like to options for making tables in my css. One with a border of 5px solid black and one with 0px. Currently in CSS i have
#contentcolumn table {
border: 5px solid black;
width: 100%;/*around 700 max for images*/
border-collapse: collapse;
}
That gives me the black 5px border, but now i need to also have one that does 0px border.
I have tried setting the 0px table in html but the css seems to over ride it. here is the html for the two tables.
<table>
<tr>
<td align="center"><IMG SRC="images/newsimage/minecraft1.jpg" ALT="mindcraft">
</td>
</tr>
<tr>
<td>Is minecraft still considered an indie game? blah blah blha lbhalbhal
</td>
</tr>
</table>
<!-- Reviews start -->
<!-- Review #1 -->
<table Border='0'>
<tr>
<th rowspan="4" width="30%">Some Image</th>
<td>Link</td>
</tr>
<tr>
<td>By who</td>
</tr>
<tr>
<td>Some info</td>
</tr>
<tr>
<td>comments</td>
</tr>
</table>
both tables are inside div tags <div id="contentcolumn"> if that matters?
Try to give border:none into style attribute. It will overwrite your css properties in css file. <table style="border:none;">
CSS:
.no-border {
border:none;
}
HTML:
<table class="no-border"></table>
You can done this using css itself. By using below css style
#contentcolumn #review_table{border:0px}
and add a id in your table like below
<div id="contentcolumn">
<table>
<tr>
<td align="center"><IMG SRC="images/newsimage/minecraft1.jpg" ALT="mindcraft">
</td>
</tr>
<tr>
<td>Is minecraft still considered an indie game? blah blah blha lbhalbhal
</td>
</tr>
</table>
<!-- Reviews start -->
<!-- Review #1 -->
<table Border='0' id="review_table"> //CHANGE: ADD THE ID TO THIS TABLE
<tr>
<th rowspan="4" width="30%">Some Image</th>
<td>Link</td>
</tr>
<tr>
<td>By who</td>
</tr>
<tr>
<td>Some info</td>
</tr>
<tr>
<td>comments</td>
</tr>
</table>
</div>
JSFILLDE:
http://jsfiddle.net/54EyB/