I do not understand why I couldn't insert a new line in this simple html code. I tried both the <p> tag and the <br> as well as the <h4>, etc. I know it must be a simple solution but I can't find it. The last sentence must be under the table. Here is the code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<body>
<h2>
<span style="color:#FF0000;">Summary</span>
</h2>
<h4></h4>
<table align="left" border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">RESULT</th>
<th scope="col" style="text-align: left;">QUANTITY</th>
<th scope="col" style="text-align: left;">PERCENTAGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>56</td>
<td>3,69</td>
</tr>
<tr>
<td>B</td>
<td>153</td>
<td>10,09</td>
</tr>
<tr>
<td>C</td>
<td>349</td>
<td>23,02</td>
</tr>
<tr>
<td>D</td>
<td>393</td>
<td>25,92</td>
</tr>
<tr>
<td>E</td>
<td>565</td>
<td>37,27</td>
</tr>
<tr>
<td>
<b>SUM</b>
</td>
<td>
<b>1516</b>
</td>
<td>
<b>100</b>
</td>
</tr>
</tbody>
</table>
<p>I want Newline here!!</p>
</body>
</html>
Any suggestions?
Remove the attribute align="left" in the table tag
Have you tried adding a <br /> tag after <table>?
I hope this works for you.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html><body>
<h2><span style="color:#FF0000;">Summary</span></h2>
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<thead><tr><th scope="col" style="text-align: left;">RESULT</th>
<th scope="col" style="text-align: left;">QUANTITY</th>
<th scope="col" style="text-align: left;">PERCENTAGE</th></tr></thead>
<tbody><tr><td>A</td><td>56</td><td>3,69</td></tr><tr>
<td>B</td><td>153</td><td>10,09</td></tr><tr>
<td>C</td><td>349</td><td>23,02</td></tr><tr>
<td>D</td><td>393</td><td>25,92</td></tr><tr>
<td>E</td><td>565</td><td>37,27</td></tr><tr>
<td><b>SUM</b></td><td><b>1516</b></td><td><b>100</b></td></tr></tbody></table>
<p>I want Newline here!!</p></body></html>
Here i removed the align='left' attribute from the table tag. Now the text is in next new line in end of table.
Hope this fixed your problem. If there is some other problem, then comment accordingly.
Use <div style="clear:both;height:1px;"><p>I want Newline here!!</p> </div> instead.
Related
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 am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>
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>
I'm having an object in a table and I'm unable to set vertical align (it doesn't seem to work).
Why is that?
Example:
http://jsfiddle.net/PHDWz/1/
When I give the td a height.. the content is vertical aligned in the middle....
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td height="400">Bla bla bla! Write something if you like! </td>
<td>
<textarea></textarea> <span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
</table>
just add an additional column to avoid the "A printer!" link being forced to be kind of attached as align-bottom to the textarea. In your css you may omit the vertical-align for the span as you have this duplicated in the outer td.
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col" colspan="2">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bla bla bla! Write something if you like! </td>
<td><textarea></textarea></td>
<td><span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
The text in the left column sits in the middle vertically when I extend the textbox. This is using Safari, please elaborate if something else
Is there any way to make the header align towards right?
Tested in Internet Explorer 7 only.
<html>
<style type="text/css">
th {
text-align: left;
}
</style>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag
<th style="width: 100px; text-align: right;">Duration
</tr>
</thead>
<tbody>
<tr>
<td > one
<td> two
</tr>
</tbody>
</table>
</body>
</html>
First, close your tags. You have a lot of invalid HTML here. Second, you're mixing the table width (100%) as a percentage and the cell widths (250px, 100px) as pixel widths. These two are not compatible. Choose either one or the other and keep it consistent throughout your table.
<table style="width:350px" border="1">
<thead>
<tr>
<th style="width:250px;">Tag</th>
<th style="width:100px; text-align:right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
You aren't closing your TH tags (or your TD tags for that matter). Fix below:
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag</th>
<th style="width: 100px; text-align: right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td> one </td>
<td> two </td>
</tr>
</tbody>
</table>