I am using rails 5 when user is registered in my website i am sending an email for him for account approval.I want to set website logo with email.
How we implement this in rails mailer view file
Html for mail template
<!DOCTYPE HTML>
<html>
<title>nytApp Email</title>
<head>
</head>
<body style="font-family: 'arial', sans-serif !important; font-size: 14px; line-height: 20px; color:#3e3e3e; background-color: #f5f5f5; font-weight: 300;">
<!-- Container Table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="640" style="margin:0 auto; background:#fff;">
<tr>
<td style="border: 1px solid #f5cd8f;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="padding: 25px 15px 20px; border-bottom: 1px solid #f5cd8f;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><%= image_path('logo.png')%></td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-weight: bold; font-size: 16px;">
<tr>
<td style="color: #ff5e00; font-weight: 300; font-size: 20px;">Welcome to Nytapp</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 20px;">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td height="10"></td></tr>
<tr>
<td>Thank you for signing up as Events Promoter!</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td>You are ready to start posting your parties for free. Login to the portal by clicking on the link below:</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td>https://nytapp.com</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td>If the above URL does not work try copying and pasting it into your browser.</td>
</tr>
<tr><td height="8"></td></tr>
<tr>
<td>If you encounter any problem, please contact us at admin#nytapp.com</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td>Thank you,</td>
</tr>
<tr>
<td>The Nytapp team</td>
</tr>
<tr><td height="30"></td></tr>
</table>
</td>
</tr>
<tr>
<td style="border-top: 1px solid #f5cd8f; vertical-align: middle; padding: 10px 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<%= image_path('logo.png') %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
In mailer you can't give relative path. So try upload your logo somewhere in cloud like s3 and give complete logo url in image tag source.
You can also use asset_url it compute complete url.
<%= image_tag asset_url('logo.png') %>
In your html.erb file which is suppose to be send as mail
you need to wrtte something like this.....
<img src=" <%= Rails.application.secrets.host + "" + asset_path("sd_logo.png") %>"
Related
I have coded an email template and it works great overall but I have an issue with the length of the divider line:
The divider is way too long when I send a test mail to my outlook mail but have the right length on all other mail clients.
<table border="0" agrepeatingblock="active" role="presentation" cellpadding="0" width="100%" cellspacing="0" style="width: 100%;" agid="greenline-development_group_2_block_11">
<tr>
<td align="center" style="vertical-align:top;padding:Block::Margin_top|INTEGER|0px 0 Block::Margin_bottom|INTEGER|0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width:100%;background-color:Block::Block_container|COLOR|transparent;">
<tr>
<td align="center" style="vertical-align: top;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="width:100%;" role="presentation">
<tr>
<td align="center" valign="top" width="100%" style="width:100%; max-width:706px">
<![endif]-->
<table border="0" cellpadding="0" width="100%" cellspacing="0" style="width:100%;max-width:706px;Margin:0 auto;background-color:Block::Content_container|COLOR|transparent;" role="presentation">
<tr>
<td align="center" style="vertical-align:top;padding:${blockparam:Block::Padding_top|INTEGER|10}px 12px 0;" class="pt-10">
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;">
<tr>
<td align="center" style="vertical-align: top; padding: 10px 12px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;">
<tr>
<td
height="${blockparam:Block::Padding_bottom|INTEGER|10}"
style="border-top:${blockparam:Horizontal_rule::Size|INTEGER|1}px solid ${blockparam:Horizontal_rule::Color|COLOR|#47c16c};height:${ref:Block::Padding_bottom}px;font-size:${ref:Block::Padding_bottom}px;line-height:${ref:Block::Padding_bottom}px;"
class="h-sm-10"
></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
My requirement is to download docx file and should be open on Microsoft word:
I am using following gems:
gem 'responders'
gem 'htmltoword
Controller code:
require 'htmltoword'
class Admin::VisibilitiesController < ApplicationController
respond_to :docx, :html, :css,:js
def preview
#project = Project.find_by(id: params[:id])
#feeder = Project.find_by(id: params[:id]).form2.last.feeder11s.first
respond_to do |format|
format.docx do
render :docx => "report1_docx",:template => 'admin/visibilities/preview.html.docx.erb', :page_height => 600, :page_width =>345
end
end
end
View file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style type="text/css">
div.alwaysbreak { page-break-before: always; }
div.nobreak:before { clear:both; }
div.nobreak { page-break-inside: avoid; }
td{padding: 2px 5px;}
</style>
<div style="padding-top:20px;">
<table style="width:800px;margin:0px auto;border:1px solid grey; background: #fff;margin: 0 auto;margin-bottom:30px;padding:10px 20px; ">
<tbody>
<tr>
<td style="padding: 15px 0 50px;">
<table style="padding:0px;overflow:hidden;display:table;">
<tbody>
<tr>
<td style="font-size: 16px;width:100%;font-weight:600">
Report No......./...../......./20116-17.....
</td>
</tr>
<tr>
<td style="font-size: 16px;width:100%;font-weight:600">
Dated: ......
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size:28px;font-weight:bold;text-align:center;padding-bottom:20px; font-style: italic;">THIRD PARTY VILLAGE INSPECTION REPORT</td>
</tr>
<tr>
<td style="font-size:28px;font-weight: bold;text-align:center;padding-bottom:25px; font-style: italic;">OF</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">RURAL ELECTRIFICATION WORKS UNDER DEEN DAYAL UPADHYAYA GRAM JYOTI YOJANA (erstwhile RGGVY 12TH PLAN)</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">IN</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">..............DISTRICT</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">SUBMITTED TO</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:25px;">........................</td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:20px;">SUBMITTED BY </td>
</tr>
<tr>
<td style="font-size:24px;font-weight:400;text-align:center;padding-bottom:30px;">........................</td>
</tr>
<tr>
<td style="font-style: italic; padding-bottom: 30px; padding-top: 100px;">
<table style="width: 100%; margin-top: 50px;">
<tr>
<td style="font-size:12px;padding-bottom:10px;font-weight:600">Report No (admin)/District(survey)/1st/2016-17/070</td>
<td style="font-size:12px;padding-bottom:10px;font-weight:600; text-align: right;">Dated: from survey (form1)</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 50px;">
<table style="width: 100%;">
<tr>
<td style="font-size:18px;font-weight:600">Location:</td>
</tr>
<tr>
<td style="font-size:16px;font-weight:600">Name of Village : <%= #project.form1.try(:village_name) %></td>
<tr>
<td style="font-size:16px;font-weight:600">Census Code No : <%= #project.form1.try(:census_code_no) %>
</td>
</tr>
<tr>
<td style="font-size:16px;font-weight:600">Name of Block : <%= #project.form1.try(:block_name) %></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
htmltoword gem currently provides just some basic styling support mostly on alignment and tables.
Here is opened GitHub issue https://github.com/karnov/htmltoword/issues/45 about that problem.
And here is the doc describing supported styles and classes.
Try to use some basic HTML tags instead of CSS-styles where it is possible, it seems the only way at the moment to get your word doc to be styled.
In a Click handler I am trying to set the innerHTML of a div(detail_popup) with a MvcHtmlString.
MvcHtmlString Bobo = #Html.Action("_TaskDetail", "ProTask");
Note: _TaskDetail is a partial view.
If I look at Bobo in debug using the HTML visualizer it is perfect.
I then assign innerHTML as such: detail_popup.innerHTML = #Bobo;
This generates a script error ... SCRIPT1002: Syntax error
I am about to lose my gourd! Any help would be much appreciated.
Bob
This is the MvcHtmlString Bobo whose assignment gives me script errors:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
11/23/2016 1:08:14 PM
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>Excavate Foundation</td>
<td>Trench will be 36 inches deep by 25 inches wide</td>
<td>Robert L. Wells</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>12:00:00</td>
<td>50%</td>
<td>7</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>5/29/2016 12:00:00 PM</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<th>StartDateAct</th>
<th>StartDateSched</th>
</tr>
<tr>
<td>6/9/2016 1:15:00 PM</td>
<td>6/9/2016 1:15:00 PM</td>
</tr>
<tr>
<th>FinishDateAct</th>
<th>FinishDateSched</th>
</tr>
<tr>
<td>6/12/2016 1:15:00 PM</td>
<td>6/12/2016 1:15:00 PM</td>
</tr>
<tr>
<th>EstIntCost</th>
<th>EstExtCost</th>
<th>EstTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>ActIntCost</th>
<th>ActExtCost</th>
<th>ActTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>BudIntCost</th>
<th>BudExtCost</th>
<th>BudTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>SurIntCost</th>
<th>SurExtCost</th>
<th>SurTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</body>
</html>
I have pulled my hair out
Following is an abbreviated version of my partial view:
#model PromanV3.Models.ProTask
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
#System.DateTime.Now
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.TaskName)</td>
<td>#Html.DisplayFor(model => model.TaskDesc)</td>
<td>#Html.DisplayFor(model => model.TaskOwnerName)</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.Duration)</td>
<td>#Html.DisplayFor(model => model.CompPercentage)%</td>
<td>#Html.DisplayFor(model => model.TaskOptions)</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>#Html.DisplayFor(model => model.RevisionDT)</td>
<td>#Html.DisplayFor(model => model.ProjectId)</td>
<td>#Html.DisplayFor(model => model.TaskId)</td>
</tr>
</table>
</div>
</body>
</html>
The is my div
<!-- Begin section that generates the detail popup for the task -->
<div id="DetailBox"
style="display: none;
z-index: 1000;
border: 2px solid blue;
background: yellow;
fill: white;
color: black;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
position: absolute;
font: 14px Nautilus Pompilius;
width: 150px;
height: 65px;
">
<script>
#{
ViewBag.vwbProject = 15;
if (ViewBag.vwbTask==null)
{ViewBag.vwbTask = 1;}
}
</script>
</div>
This is my click handler:
function setMouseClickmt(xpos, ypos, width, height, message)
{
function inner()
{
var MultTxtBoxID = this.node.getAttribute("id"); // 'this' refers to the clear_rect (clear rectangle) of the SVG MultTxtBox
var MultTxtBoxElement = document.getElementById(MultTxtBoxID); // grab the element
var task_ID = MultTxtBoxElement.getAttribute("id");
var detail_popup = document.getElementById('DetailBox');
var task_index = getTaskPos(task_ID, arr_of_Tasks);
detail_popup.setAttribute('data-task',task_index);
detail_popup.setAttribute('data-project',15);
var tt = detail_popup.getAttribute('data-task');
var pp = detail_popup.getAttribute('data-project');
var ldt = new Date();
var ldts = ldt.toLocaleString();
//detail_popup.innerHtml = ldts + '</br>' + tt ;
#{
MvcHtmlString Bobo = #Html.Action("_TaskDetail", "ProTask");
};
detail_popup.innerHTML = #Bobo;
/* Make the 'DetailBox' div appear */
detail_popup.style.display = 'block';
detail_popup.style.top = (100) + 'px';// '400px';//works//mTop + 'px';
detail_popup.style.left = (1200) + 'px';// //works//mLeft + 'px';
detail_popup.style.width = 250;//width;
detail_popup.style.height = 500;//height;
}
return inner;
}
This is the script output that it chokes on:
detail_popup.innerHTML =
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
font: 12px Nautilus Pompilius;
}
th, td {
padding: 3px;
text-align: left;
}
table#t01 {
width: 35%;
background-color: #ffd800;
}
</style>
</head>
<body>
<div>
11/23/2016 1:21:34 PM
<table id="t01">
<tr>
<th>Name</th>
<th>Description</th>
<th>Owner</th>
</tr>
<tr>
<td>Excavate Foundation</td>
<td>Trench will be 36 inches deep by 25 inches wide</td>
<td>Robert L. Wells</td>
</tr>
<tr>
<th>Duration</th>
<th>Completion</th>
<th>Options</th>
</tr>
<tr>
<td>12:00:00</td>
<td>50%</td>
<td>7</td>
</tr>
<tr>
<th>Revision DT</th>
<th>Project ID</th>
<th>Task ID</th>
</tr>
<tr>
<td>5/29/2016 12:00:00 PM</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<th>StartDateAct</th>
<th>StartDateSched</th>
</tr>
<tr>
<td>6/9/2016 1:15:00 PM</td>
<td>6/9/2016 1:15:00 PM</td>
</tr>
<tr>
<th>FinishDateAct</th>
<th>FinishDateSched</th>
</tr>
<tr>
<td>6/12/2016 1:15:00 PM</td>
<td>6/12/2016 1:15:00 PM</td>
</tr>
<tr>
<th>EstIntCost</th>
<th>EstExtCost</th>
<th>EstTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>ActIntCost</th>
<th>ActExtCost</th>
<th>ActTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>BudIntCost</th>
<th>BudExtCost</th>
<th>BudTotCost</th>
</tr>
<tr>
<td>20.00</td>
<td>14.00</td>
<td>34.00</td>
</tr>
<tr>
<th>SurIntCost</th>
<th>SurExtCost</th>
<th>SurTotCost</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</body>
</html>
;
Please try this...
From the razor page, pass the value of Model (#Bobo) to your JS file
<script>
var tempValue = '#Bobo';
setMouseClickmt(tempValue , yourOtherValues....);
</script>
and assign the value passed in your click handler in your JS
detail_popup.innerHTML = tempValue ;
Add the single quotes around #Bobo when you use it in the script tag of the razor page.
Hope it helps
I try to import an email-template in campaign monitor, but it shows always the same problem:
No unsubscribe link We require a single-click unsubscribe link in every campaign you send. Please add the tags and around the words you want to become an unsubscribe link.
What I do not understand is, that I have the tag in my template:
<layout label="POST-FOOTER25">
<table width="100%" bgcolor="#fff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidthinner">
<tbody>
<!-- Top Spacing -->
<tr>
<td width="100%" height="10" style="font-size: 0;line-height: 0;border-collapse: collapse;"> </td>
</tr>
<!-- Top Spacing -->
<tr>
<td width="100%">
<table width="560" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidthinner">
<tbody class="">
<tr class="">
<td width="100%" align="right" valign="middle" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; line-height: 16px; color: rgb(62, 69, 76); text-align: center; font-weight: 400;" mgedit="text" class="aligncenter">
<multiline label="text617_86">
<!--[if !mso]><!-->
<span style="font-family: 'Open Sans', Arial, sans-serif;">
<!--<![endif]-->
You are receiving this email because you subscribed for updates on our website. <unsubscribe>Click here to Unsubscribe</unsubscribe><br /><br />
<preferences>Manage your subscription</preferences>
<!--[if !mso]><!-->
</span>
<!--<![endif]-->
</multiline>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Bottom Spacing -->
<tr>
<td width="100%" height="10" style="font-size: 0;line-height: 0;border-collapse: collapse;"> </td>
</tr>
<!-- Bottom Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</layout>
There is no comment or if-case around the unsubscribe-tag. Any other idea?
Greets, yab86
I'd recommend moving the unsubscribe and preferences markup out of the multiline markup area. It's likely their system doesn't recognize it because it's put into the editable multiline WYSIWYG Editor
I am trying to figure out the difference between putting an align attribute on a table cell vs using text-align css attribute. The code below shows different results in IE vs Others. In IE, the align ends up aligning every sub child, so the text 'test' is centered aligned, while in FF/Webkit this is not the case and it remains left aligned. What is the correct behavior?
<!DOCTYPE html>
<html>
<head>
<style>
table { width: 60%; }
table td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td align='center'>
<table>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The align attribute is old-style "tag-soup" HTML, deprecated according to an official W3 document. Prefer CSS styling, as with
<td style="text-align: center;">
<!-- Content -->
</td>
Better still, give the TD a className (e.g., a semantic className like "center") and set that style in the stylesheet:
td.center {
text-align: center;
}
CSS:text-align and HTMLElement.align property works differently if there are block elements(Ex: tables) as children, so replace with caution.
See this demo below for reference.
.Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }
.CenterSelf { margin: auto }
.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }
.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }
<table class="Container" align="center">
<tr><td>TABLE1</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<table class="Container" style="text-align: center">
<tr><td>TABLE2</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
DIV1
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
DIV2
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
DIV3
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
DIV4
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
<tr>
<td> </td>
<td colspan="2">TABLE</td>
<td colspan="2">DIV</td>
</tr>
<tr>
<td>Elements</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
</tr>
<tr>
<td>Self</td>
<td>O</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>inline child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>inline child of inline child</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>block child</td>
<td>X</td>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>inline child of block child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
</table>
O: Centered
X: Not centered