I'm totaly begginer in creating HTML body, but i need to create HTML body of an email, i have to put into that email message Table with some data. It is pretty simple table with 2 rows and 4 columns but, there are 3 cell that have to be splite. So i've created table (1 row 2 columns) inside that cell. And here is the problem, while filling those new cell, there "main" cell is not filled correctly, please see below.
an example
How to fill that correctly. I would be grateful for a code that fill it.
My html body:
<table style="text-align: center; padding: 8px; width: 600px;" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table style="height: 50px; width: 150px; text-align: center;" >
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And i would like to get something like that:
example
All of your <table> needs to be
<table cellspacing="0" cellpadding="0" border="0">
this will remove the extra white padding in<td>
<table cellpadding="0" cellspacing="0" border="0" style="text-align: center; padding: 8px; width: 600px;" border="1"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Related
we are tryin to make modify an email for making it work in outlook and media# don't seem to work. im out of idea,
this doesn't seem to work to
here the base model i took for outlook specification with css but it don't seems to work
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
soo i tried simple test with changing the background color first with a nice looking red
but it doesn't seem to actually do something. i don't realy know what i can do
<!--[if mso]>
<style>
.table {
background-color : red !important;
}
.body {
background-color : red !important;
}
</style>
<![endif]-->
</head>
<body
class="clean-body"
style="
margin: 0 auto;
padding: 0 auto ;
-webkit-text-size-adjust: 100%;
color-scheme: light only;">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
background="https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png" width="600" height="auto"
style="
max-width: 600px;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
vertical-align: top;
min-width: 320px;
margin: 0 auto;
background-image: url('https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png'); width:600px; display: block;
background-color : rgb(33, 34, 34);
color-scheme: light only;
width: 100%;
color: #ffffff;
font-family: 'Roboto', sans-serif;
top : -50px;
"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td style="min-width: 180px; width: 210px; padding-bottom: 37px;">
<table style="margin: 0; padding: 0">
<tbody>
<tr>
<td
style="
padding-left: 42px;
padding-bottom: 1px;
min-width: 83px;
padding-top: 40px;
padding-right: 0px;
"
>
<table>
<tbody>
<tr>
<td style="min-width: 180px">
<div
style="
font-size: 15px;
font-weight: 800;
line-height: 1;
color:rgb(126, 122, 122);filter: brightness(100);
"
>
Inès AZUELOS
</div>
</td>
</tr>
<tr>
<td>
<div
style="
font-size: 13px;
font-weight: 600;
padding-top: 5px;
padding-left: 1px;
color: #3399ff;"
>
Direction - Assistante
</div>
</td>
</tr>
<tr>
<td style="
padding-top: 16px;
padding-left: 2px;
color:rgb(126, 122, 122);filter: brightness(100);
font-size: 13px;
font-weight: 600;"
>
EICIAM
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="
padding-left: 41px;
padding-bottom: 2px;
padding-right: 0px;
padding-top: 15px;
min-width: 83px;
"
>
<table>
<tbody>
<tr>
<td alt="logo facebook" title="logofacebook" style="padding: 3px; width : 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block;border :0;"/>
</td>
<td alt="logo linkedin" title="logolinkedin" style="padding: 3px; width: 20px; height: 20px;">
<img style="width: 20px; height: 20px; display: block; border :0;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<!-- --------------------- -->
<td style="padding: 33px 0 0 0; width: 226px; margin-left: 5px ">
<table>
<tbody>
<tr>
<td style="border-left: 1px solid #ffffff67; padding: 7px 0 0 19px;">
<table
style="
font-size: 11px;
color: #212222;
letter-spacing: 0.7px;
"
>
<tbody>
<tr>
<td style="min-width: 170px">
<table>
<tbody>
<tr>
<td alt="phone" title="phone" style="min-width: 19px; padding-top: 2px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td href=""style="color:rgb(126, 122, 122);filter: brightness(100%); padding-top: 5px; padding-left: 10px; font-size: 12px;"> </td>
</tr>
<tr>
<td alt="mail" title="mail" style="padding-top: 13px; width: 20px; height : 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px; font-size: 12px;">
<a href="" style="color:rgb(126, 122, 122);filter: brightness(100);" > </a>
</td>
</tr>
<tr>
<td alt="web" title="web" style="padding-top: 12px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border: 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px;font-size: 12px;">
eiciam.fr
</td>
</tr>
<tr>
<td alt="print" title="print" style="padding-top: 15px;width: 20px; height: 20px; display:inline; border:0;">
<img style="width: 20px; height: 20px; display: block; border :0;" onerror="this.src=';"/>
</td>
<td style="padding-top: 16px; padding-left: 10px">
<a style="color:rgb(126, 122, 122);filter: brightness(100); font-size: 9px" style="color: white;"> N'imprimez que si nécessaire </br> Pensez à l'environnement</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td alt="" title="" style="min-width: 50px; width: 100px; height: 100px; border:0;">
<img src="" style="min-height: 50px; min-width: 50px; width: 100px; height: auto; display: block; border: 0;margin-top: 50px;"/>
</td>
<!-- ------------------------------ -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
The media element is not supported. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
The fact is that Outlook uses Word as an editor and rendering engine for message bodies.
I'm injecting HTML into a Word Mergefield (using Aspose) and it seems to work well and renders as I'd expect.
However, it seems to be treated as one table rather than two. Any text or paragraphs inserted between the tables is visible during editing but not when printing. When you print, the tables bunch together as one and anything in between is removed.
Is there anything I can change in the HTML to allow the tables to be independent when rendered in Word and have at least one line break between them? The #variables are replaced with text from the database. Using Office 365 (not the cloud one, the one installed locally)
<table style="border-collapse: collapse; width: 100% ; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 100%;">#Statement</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100% ; margin-left: auto; margin-right: auto;" border="0" >
<tbody>
<tr style="height: 12px; width: 100%">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Bank</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px; text-align: right ; padding: 0px;">Sort Code:</td>
<td style="width: 15%; height: 12px; text-align: right ; padding: 0px;">#SortCode</td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line1</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px; text-align: right ; padding: 0px;">Account No:</td>
<td style="width: 15%; height: 12px ; text-align: right ; padding: 0px;">#AccountNo</td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line2</td>
<td style="width: 15% ; height: 12px;"> </td>
<td style="width: 20% ; height: 12px;"> </td>
<td style="width: 15% ; height: 12px;"> </td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line3</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px;"> </td>
<td style="width: 15%; height: 12px;"> </td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#PostCode</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px;"> </td>
<td style="width: 15%; height: 12px;"> </td>
</tr>
</tbody>
</table>
It seems that this is the behavior of MS Word that Microsoft Word merges two or more consecutive Tables into one big Table if there are no Paragraphs in between them. In your HTML, you can simply add an empty paragraph between Tables:
<table style="border-collapse: collapse; width: 100% ; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 100%;">#Statement1</td>
</tr>
</tbody>
</table>
<p style="margin-top:0pt; margin-bottom:0pt; font-size:1pt">
<span> </span>
</p>
<table style="border-collapse: collapse; width: 100% ; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr style="height: 12px; width: 100%">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Bank</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px; text-align: right ; padding: 0px;">Sort Code:</td>
<td style="width: 15%; height: 12px; text-align: right ; padding: 0px;">#SortCode</td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line1</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px; text-align: right ; padding: 0px;">Account No:</td>
<td style="width: 15%; height: 12px ; text-align: right ; padding: 0px;">#AccountNo</td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line2</td>
<td style="width: 15% ; height: 12px;"> </td>
<td style="width: 20% ; height: 12px;"> </td>
<td style="width: 15% ; height: 12px;"> </td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line3</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px;"> </td>
<td style="width: 15%; height: 12px;"> </td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#PostCode</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px;"> </td>
<td style="width: 15%; height: 12px;"> </td>
</tr>
</tbody>
</table>
Hope, this helps. I work with Aspose as Developer Evangelist.
I generated following PDF report data formation by HTML using Rotativa.
But when I tested with large data, above the header report is getting cut.
So how can I handle large data in HTML without page margins not affected.
I have used pure <table><tr><td></td></tr></table> structure to design. And to prevent data to overflow, I have set all my tables with style table-layout:fixed and word-wrap: break-word.
normal report view:
altered report view:
following is my html page for the header
Does anyone help me?
<div id="header" style="font-family: Calibri; padding-top: 25px;">
<div style="float: right; font-family: Calibri; padding-right: 15px; font-size: 11px; margin-bottom: 2px;">
Page <span class="page"></span> of <span class="topage"></span>
</div>
<script type="text/javascript">
(function () {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]);
}
var p = ['page', 'topage', 'frompage', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in p) {
var y = document.getElementsByClassName(p[i]);
for (var j = 0; j < y.length; j++)
y[j].textContent = vars[p[i]];
}
})();
</script>
<table id-="reportHedear" style="width: 100%; table-layout: fixed; border: 1px solid lightgrey; font-family: Calibri; top: 10px">
<tr style="width: 100%">
<td style="width: 1%" valign="top"></td>
<td style="width: 75%" valign="top">
<table style="width: 100%; margin: 0px; table-layout: fixed;">
<tr style="width: 100%">
<td id="logo" style="width: 25%; margin-top: 10px">
<img src="#Model.CompanyLogo" alt="" style="max-height: 50px; max-width: 220px" />
</td>
<td style="width: 3%"></td>
<td id="companyHeader" style="width: 72%" valign="top">
#if (#Model.CompanyMainTag != null && #Model.CompanyTag1 != null && #Model.CompanyISOTag != null)
{
<table style="table-layout:fixed; word-wrap:break-word; width:100%; border-top: 5px solid; border-bottom: 5px solid;">
<tr id="mainTag" style="width:100%">
<td style="width:100%; text-align: center; font-size:15px">#Model.CompanyMainTag</td>
</tr>
<tr id="tag1" style="width:100%">
<td style="width:100%; text-align: center; font-size:13px">#Model.CompanyTag1</td>
</tr>
<tr id="companyISO" style="width:100%">
<td style="width:100%; text-align: center; font-size:15px">#Model.CompanyISOTag</td>
</tr>
</table>
}
</td>
</tr>
<tr style="width:100%;">
<td colspan="3" style="width:100%; ">
<table style="width:100%; font-size: 12px; table-layout: fixed">
<tr style="width:100%">
<td id="addressInfo" style="width: 30%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%">
<td style="width: 45%; text-align: right; font-weight: bold" valign="top"><span>Address: </span></td>
<td style="width: 55%;"><label>#Model.ComapnyAddress</label></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<td style="width: 45%; text-align: right; font-weight: bold" valign="top"><span>Phone: </span></td>
<td style="width: 55%"><span>#Model.ComapnyPhone</span></td>
</tr>
#if (Model.IsEnableProgramManager)
{
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<td style="width: 45%; text-align:right; font-weight: bold" valign="top"><span>Program Manager: </span></td>
<td style="width: 55%"><span>#Model.ProgramManager</span></td>
</tr>
}
</table>
</td>
<td id="companyDetail" style="width: 35%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%">
<th style="width: 30%; text-align: right;" valign="top"><span>#Model.CustomerLabel: </span></th>
<td style="width: 70%; font-weight: bold"><span>#Model.CompanyName</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Address: </span></th>
<td style="width: 70%;"><label>#Model.Address</label></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Web: </span></th>
<td style="width: 70%"><span>#Model.Website</span></td>
</tr>
</table>
</td>
<td id="comapnyDetails1" style="width: 35%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%;">
<th style="width: 30%; text-align: right;" valign="top"><span>Attn: </span></th>
<td style="width: 70%; "><span>#Model.ContactPersonName</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Email: </span></th>
<td style="width: 70%;"><span>#Model.EmailID</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Phone: </span></th>
<td style="width: 70%"><span>#Model.ContactNo</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Fax: </span></th>
<td style="width: 70%"><span>#Model.Fax</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="width: 2%" valign="top"></td>
<td style="width: 21%" valign="top">
<table style="width: 100%; table-layout: fixed" align="center">
<tr style="width: 100%">
<td style="width: 100%" align="center">
<span style="margin-bottom: 1px; font-weight: bold; font-size: 24px">#Model.AssemblyQuotationHeader</span>
<table id="QuoteDetails" style="max-width: 100%; table-layout: fixed; margin-top: 1px; margin-left: 10px; font-weight: bold; text-align: center; border: black; border: 1px solid black; border-collapse:collapse">
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">RFQ ID</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.QuoteID</td>
</tr>
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Assembly Id</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.AssemblyIDWithVersion</td>
</tr>
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Date</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.QuoteDate</td>
</tr>
#if (Model.IsEnableQuoteExpirationDate)
{
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Expires</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.ExpireDate</td>
</tr>
}
</table>
</td>
</tr>
<tr style="width: 100%">
<td style="width: 100%; font-size: 11px; text-align: center;">
<p>#Model.AssemblyQuotationMsg</p>
</td>
<td style="width: 1%"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
I want to middle align the following - how can I do that:
<div class="container-fluid" style="height:100%">
<table id="PulseTable" class="display2" style="height:100%">
<tbody id="PulseBody" style="height:100%"><tr class="pulseheader">
<td class="pulseheader" style="padding-top: 10px; padding-bottom: 10px; font-size: 16px; font-weight: bold;">Manager</td>
</tr>
<tr class="pulseline" style="height: 20px;">
<td class="pulseline" style="padding-left: 40px; font-size: 12px; font-style: normal;">Header</td>
<td class="pulseline" style="padding-left: 20px; font-size: 12px; font-style: normal;">New York II</td>
<td class="NONE" style="padding-left: 20px;"><img src="http://blog.sckyzo.com/wp-content/google-small.png" style="height: 30px; width: auto;"></td>
</tr>
<tbody>
</table>
</div>
To center them horizontally within each table cell, use:
text-align: center;
To center them vertically (this only works with tables, or elements with display: table-cell):
vertical-align: middle;
Apply these styles to the <td> element.
<table>
<tr>
<td style="text-align: center; vertical-align: middle;">
Foo bar
</td>
</tr>
</table>
I hope it works for you
.container-fluid{
position:relative;
margin: 0px auto;
}
You need to use COLSPAN to merge the cell in the first line and also use CSS style "text-align: center" to align it do center:
<div class="container-fluid" style="height:100%">
<table id="PulseTable" class="display2" style="height:100%">
<tbody id="PulseBody" style="height:100%"><tr class="pulseheader">
<td class="pulseheader" colspan="3" style="padding-top: 10px; padding-bottom: 10px; font-size: 16px; font-weight: bold; text-align: center">Manager</td>
</tr>
<tr class="pulseline" style="height: 20px;">
<td class="pulseline" style="padding-left: 40px; font-size: 12px; font-style: normal;">Header</td>
<td class="pulseline" style="padding-left: 20px; font-size: 12px; font-style: normal;">New York II</td>
<td class="NONE" style="padding-left: 20px;"><img src="http://blog.sckyzo.com/wp-content/google-small.png" style="height: 30px; width: auto;"></td>
</tr>
<tbody>
</table>
</div>
**UPDATE:
#tablaarriba a:hover {
color: gray;
}
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
<a style="color: black; text-decoration: none; background-color: transparent;" href="social.htm">Social</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
<a style="color: black; text-decoration: none;" href="file:///Users/monmunoz/Desktop/Colegio/Tec/Quinto%20Semestre/ITGS/PROYECTO/Comercial.htm">Comercial</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="proyectospersonales.htm">Proyectos Personales</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="sobrelafotografa.htm">Sobre la fotógrafa</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
** I changed some details in the html pointed out by the HTML validator. So now I have this.
I'm almost done building my website; however I'm trying to incorporate the a:hover attribute in my stylesheet and I don't know what I'm doing wrong. I want my links to change to color grey whenever the mouse passes above them. Please help me. So far I have this:
Try this:
#tablaarriba a:hover {
color: gray ;
}
<div id="tablaarriba">
LINK
</div>
table a:hover {
color: gray ;
}
table a {
color: black; text-decoration: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link href="menuarriba.css" rel="stylesheet" type="text/css">
<title>Rosy G Photography and Artwork</title>
</head><body>
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
Social<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
Comercial<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Proyectos Personales<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Sobre la fotógrafa<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
</body></html>
I recommend adding a class to you're a element. Then use that class inside of the CSS, and try from there. If that does not work, then you might try using transition.
.a {
text-decoration: none;
color: black;
-webkit-transition: 0.256s;
}
.a:hover {
transition: 0.256s;
color: grey;
}
Test
The inline style style="color: black;..." is stronger than non-inline styles, so you cannot override it.
You should stylize the a tag with a selector (class or tag one).