Inline CSS is not working with gem 'htmltopdf' - ruby-on-rails

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.

Related

How to set website logo image on signup mail in rails?

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") %>"

Can't set innerHTML of a div with Html.Action("_TaskDetail", "ProTask")

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

jQuery UI dialog - cannot insert table in dialog contents

I have a simple web page where for each row of data, I can pop up a jQuery UI dialog with the details of that row. Since there can be multiple rows in the sub-query a table is the best choice. The result is that I get an empty dialog box, and the table contained in that div (the one for the dialog) appears at the bottom of the page, whether the row is clicked to activate the dialog. Everything else works perfectly, the event for the click, the dialog popup, the passing of the right id for the div, all perfect.
But the dang table (the one inside the dialog, with the class of 'inner-table') appears at the bottom of the page, right off the bat.
The HTML is created in Groovy, with the HTMLMarkupBuilder, and the resulting HTML looks like the following:
<html>
<head>
<title>NAS Execution Groovy Servlet</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='js/jquery.dataTables.min.js'></script>
<script type='text/javascript' src='js/executions.js'></script>
<link rel='stylesheet' type='text/css' href='css/jquery.dataTables_themeroller.css'></link>
<link rel='stylesheet' type='text/css' href='css/jquery-ui.css'></link>
<link rel='stylesheet' type='text/css' href='css/nas.css'></link>
</head>
<body>
<div id='results' class='execution-results'>
<p id='rpt-header'>
<span class='rpt-header-txt'>Backup Schedule Report for </span>
<span class='rpt-header-asset'>ret2w089n1t1</span>
</p>
<table id='nas-table'>
<thead>
<tr class='table-header'>
<th class='hidden'>Backup ID</th>
<th>Schedule Name</th>
<th>Backup Product</th>
<th>Size Mb</th>
<th>Start Time</th>
<th>Duration</th>
<th>Expiration Date</th>
<th>Mon 17</th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td class='hidden'>12345678</td>
<td class='row-data'>null</td>
<td class='row-data'>Product One</td>
<td id='size-mb' class='row-data'>601.31</td>
<td class='row-data'>00:09:03</td>
<td class='row-data'>158 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<tr class='row'>
<td class='hidden'>23456789</td>
<td class='row-data'>PolicyName</td>
<td class='row-data'>Product Two</td>
<td id='size-mb' class='row-data'>995.92</td>
<td class='row-data'>20:09:00</td>
<td class='row-data'>191 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<div id='dialog-23456789' class='details-dialog'>
<table class='inner-table'>
<thead>
<tr>
<th>JOB_TYPE_NAME</th>
<th>VENDOR_STATUS_NAME</th>
<th>KILOBYTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Incr Backup</td>
<td>Successful</td>
<td>1019821</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</body>
</html>
The jQuery for this is pretty simple; it uses the id from the row clicked on, and pops up a dialog window. That works fine, but the table that is contained in that div is actually at the bottom of the screen, even before anything is clicked:
$(document).ready(function() {
$('#nas-table').dataTable( {
"bJQueryUI": true,
"aaSorting": [[4, 'asc']]
} );
$('.row').live("click", function(){
var target = $(this);
var backupId = $(this).children(":first").html();
var thisId = '#dialog-' + backupId;
$(thisId).dialog(
{
title: "Backup Job Detail",
width: 800,
height: 450
}
);
$(thisId).dialog("open");
$(thisId).dialog("widget").position({
my: 'left top',
at: 'left bottom',
of: target
});
});
} );
At first, I thought the Groovy HTMLMarkupBuilder was outputting the DOM before everything happened, but when I do a view source, copy it to a file, and open the file in my browser, I get the same result.
I would appreciate any help with this. I asked this question earlier, in case you want to complain about that, but I had to follow up some other potential issues in the Groovy code, which I resolved. This example is more complete, and represents exactly what my code will do.
Brian

The problem is that you have a div nested within a table outside of a TR and TD, which will cause the rendering and DOM to be a bit wrong. If you adjust the html so that it resembles something like this it will work:
<div id='results' class='execution-results'>
<p id='rpt-header'>
<span class='rpt-header-txt'>Backup Schedule Report for </span>
<span class='rpt-header-asset'>ret2w089n1t1</span>
</p>
<table id='nas-table'>
<thead>
<tr class='table-header'>
<th class='hidden'>Backup ID</th>
<th>Schedule Name</th>
<th>Backup Product</th>
<th>Size Mb</th>
<th>Start Time</th>
<th>Duration</th>
<th>Expiration Date</th>
<th>Mon 17</th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td class='hidden'>12345678</td>
<td class='row-data'>null</td>
<td class='row-data'>Product One</td>
<td id='size-mb' class='row-data'>601.31</td>
<td class='row-data'>00:09:03</td>
<td class='row-data'>158 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<tr class='row'>
<td class='hidden'>23456789</td>
<td class='row-data'>PolicyName</td>
<td class='row-data'>Product Two</td>
<td id='size-mb' class='row-data'>995.92</td>
<td class='row-data'>20:09:00</td>
<td class='row-data'>191 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
</tbody>
</table>
<div id='dialog-23456789' class='details-dialog' style="display:none;">
<table class='inner-table'>
<thead>
<tr>
<th>JOB_TYPE_NAME</th>
<th>VENDOR_STATUS_NAME</th>
<th>KILOBYTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Incr Backup</td>
<td>Successful</td>
<td>1019821</td>
</tr>
</tbody>
</table>
</div>
</div>
The trick is to move the div outside of the parent table and also you need to set the display:none on the details table or it will be shown when the page is rendered.

question about application.html.erb

i have a table in my application.html.erb.like this:
<body>
<table width='100%' border='3'>
<tr><td height="100"> </td></tr>
<tr>
<td width="10%"></td>
<td width="80%"></td>
<td width="10%"></td>
</tr>
</table>
<%= yield %>
</body>
i want to put contents of other page in <td width="80%"></td> but i dont know how can i do that?
thank you for your helps

<body>
<table width='100%' border='3'>
<tr><td height="100"> </td></tr>
<tr>
<td width="10%"></td>
<td width="80%"><%= render "other_page" %></td>
<td width="10%"></td>
</tr>
</table>
<%= yield %>
</body>
This will render _other_page.html.erb.
Read more about it here:
http://guides.rubyonrails.org/layouts_and_rendering.html#using-partials

Simply move the yield statement:
<body>
<table width='100%' border='3'>
<tr>
<td height="100"></td>
</tr>
<tr>
<td width="10%"></td>
<td width="80%"><%= yield %></td>
<td width="10%"></td>
</tr>
</table>
</body>

What is the correct usage of 'align' vs 'text-align'

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

Resources