I'm sending email in Oracle 11g with apex_mail.send function. I have below html structure. I have added style for table in this html. but when i open received email, style is not applied to the table. only text is visible.
How can i solve this ?
<html>
<head>
<style>table{border-collapse:collapse;}table,td,th{border:1px solid grey;}td,th{padding:5px;}</style>
</head>
<body>
<table width="100%">
<tr>
<th scope="col">Company</th>
<th scope="col">Amount</th>
<th scope="col">Reference</th>
<th scope="col">Note</th>
</tr>
<tr>
<td>HNB</td>
<td>226</td>
<td>..952</td>
<td>Insurance payment.</td>
</tr>
<tr>
<td>AC</td>
<td>2150</td>
<td>..255</td>
<td>A/C service.</td>
</tr>
</table>
</body>
</html>
Related
My id #kiwi doesn't seem to work. Could anyone explain me why it is not working? I've been searching for some help but couldn't find it. It doesn't even work when I try to class it too.
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
you should assign the id to <tr> tag and not put it in a div
This works:
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<tr id="kiwi">
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
In fact it does work. It is the matter of div content.
Instead of
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
Try for example:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="kiwi">Kiwi</div></td>
</tr>
Edit: As it turns out, you can use a div inside a tr as well. So you can either place it inside the td tag, as shown below. Or if you want to color the whole row, you can put id on 'tr' itself, as suggested by others here.
There are a few things there. First of all, you cannot put a<div> directly inside a <table> tag. You have to place it inside a <th> or <td> tag.
See more here : div inside table
Also, you <div> tag is opened before <tr>, but closed after it, which is not correct. Always open and close tags in correct order.
You can do something like this:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="#kiwi">Kiwi</div></td>
</tr>
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
Here is my current code for my table. I am trying to make the table header "Famous Monsters by Birth Year" the color red and cannot figure out for the life of me how to do it.
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>
If you do not want to use a separate CSS file and simply want to make the header red within your html you can do the following:
<th colspan="2"><font color="red">Famous by Birth Year</font></th>
But as the collor attribute of the font tag is not supported by HTML5 I would recommend using in-line CSS:
<th colspan="2" style="color:red">Famous by Birth Year</th>
I am a new programmer AngularJS, and i have a problem trying to achieve a specific template for a table.
I would like to achieve the following table, but can not find how to do it:
<!DOCTYPE HTML>
<html >
<head>
<title></title>
</head>
<body >
<table border="1" width="50%" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<th colspan="33">XXXXXXXXXXXXXXXXXXXXXXX</th>
</tr>
<tr>
<th rowspan="2"> </th>
<th colspan="2">P1</th>
<th colspan="2">P2</th>
<th colspan="2">P3</th>
</tr>
<tr >
<th >INFO1</th>
<th >INFO2</th>
<th >INFO1</th>
<th >INFO2</th>
<th >INFO1</th>
<th >INFO2</th>
</tr>
</tbody>
</table
</body>
</html>
I have the following code in AngularJS however I can not repeat th because there is no html element that wraps:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<title></title>
<script src="js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller("myCTL",['$scope',function($scope){
$scope.datas=[{id:'1', name:'P1',pct:'10'},{id:'2', name:'P2',pct:'70'},{id:'3', name:'P3',pct:'66'}]
}])
</script>
</head>
<body ng-controller="myCTL">
<table border="1" width="50%" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<th colspan="33">XXXXXXXXXXXXXXXXXXXXXXX</th>
</tr>
<tr>
<th rowspan="2"> </th>
<th colspan="2" ng-repeat="data in datas">{{data.name}}</th>
</tr>
<tr>
ng-repeat ="data in datas" [START]
<th >INFO1</th>
<th >INFO2</th>
ng-repeat [END]
</tr>
</tbody>
</table
</body>
</html>
Please if anyone knows how to solve this problem would greatly appreciate it.
Thanks a lot in advance.
Use ng-repeat-start and ng-repeat-end:
<tr>
<th ng-repeat-start ="data in datas">INFO1</th>
<th ng-repeat-end>INFO2</th>
</tr>
I wanted a html page which has a html header and a table header to have non scrollable feature. Only the table contents should be scrollable.
For ex:
<html>
<body>
<h1>header</h1>
<h1>header2</h1>
<table>
<thead>
<tr>
<th>name</th>
</tr>
<tr>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Venkat</td>
</tr>
<tr>
<td>bangalore</td>
</tr>
//this part will be repeating
</tbody>
</table>
</body>
</html>
I want only the contents in the table body to be scrollable.
I had referred the following link also How do you create non scrolling div at the top of an HTML page without two sets of scroll bars
But i cannot use the div to only contain headers and table header..
I have created a fiddle with a situation similar to mine. Please have a look http://jsfiddle.net/VenkateshManohar/bU7NN/
You will can find a jQuery plugin here that will do it for you ;)
You can try like this: LINK
HTML Code:
<div class="dataGridHeader">
<div class="dataGridContent">
<table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even">
<thead>
<tr>
<th width="160">Shopper Name</th>
<th width="160">First Name</th>
<th width="160">Last Name</th>
<th width="160">User ID</th>
<th width="160">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td width="160">C2C Fishing</td>
<td width="160">John</td>
<td width="160">Doe</td>
<td width="160">C2C Fishing</td>
<td width="160">Enabled</td>
</tr>
.
.
.
.
</tbody>
</table>
</div>
</div>
Hope this helps