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>
Related
I'm creating my program on w3school which it does not provide any debugging tools at all, I basically finished my project on there but later found out I had 80+ errors that needs fixing which I'm given super generic answers so I can't seem to figure out what exactly the issue is. I'm a super newbie at HTML and unlike java where eclipse at least tells you where exactly the error is at and gives you a little better info I have no idea what the errors mean. I am also using w3school file upload method to debug my program. Also my program is basically just a tv schedule having the days, time, and each shows broken down
I've tried googling some answers but its not really helping
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Tv Schedule</title>
</head>
<body>
<table>
<table cellpadding="0" cellspacing="0"/>
<thead>
<tr>
<th style="background-color:white">
<th style="background-color:black;color:white">Monday</th>
<th style="background-color:black;color:white">Tuesday</th>
<th style="background-color:black;color:white">Wednesday</th>
<th style="background-color:black;color:white">Thursday</th>
<th style="background-color:black;color:white">Friday</th>
<th style="background-color:black;color:white">Saturday</th>
<th style="background-color:black;color:white">Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>12:00pm</th>
<th rowspan="4" style="background-color:purple">Ben & Jerry's show</th>
<th rowspan="2" style="background-color:yellow">The Happy Mile</th>
<th rowspan="3" colspan="3" style="background-color:teal">That Yesterday Show</th>
<th rowspan="4" style="background-color:lime">Let them Running Cat</th>
<th rowspan="4" style="background-color:red">Run Talk</th>
</tr>
<tr>
<th style="background-color:white;color:white">12:30pm</th>
</tr>
<tr>
<th>1:00pm</th>
<th rowspan="2" style="background-color:green">The Laptop Conspiracy</th>
<tr>
<th style="background-color:white;color:white">1:30pm</th>
<th rowspan="3" colspan="2" style="background-color:tan">Cat Street</th>
<th style="background-color:royalblue">Slept News</th>
</tr>
<tr>
<th>2:00pm</th>
<th rowspan="2" colspan="2" style="background-color:Turquoise">Slept</th>
<th rowspan="2" colspan="3" style="background-color:RosyBrown">Adultsnado 4</th>
</tr>
<tr>
<th style="background-color:white;color:white">2:30pm</th>
</tr>
<tr>
<th>3:00pm</th>
<th colspan="5" style="background-color:SandyBrown">Citizen Yang</th>
<th rowspan="3" style="background-color:aqua">Slept</th>
<th rowspan="5" style="background-color:burlywood">Computer Wars</th>
</tr>
<tr>
<th style="background-color:white;color:white">3:30pm</th>
<th rowspan="2" style="background-color:lightsteelblue">Lionnado 4</th>
<th rowspan="3" colspan="2" style="background-color:Olive">Citizen Moong</th>
<th rowspan="2" colspan="2" style="background-color:Moccasin ">Dr. LongestRun</th>
</tr>
<tr>
<th>4:00pm</th>
</tr>
<tr>
<th style="background-color:white;color:white">4:30pm</th>
<th rowspan="2" style="background-color:linen">The N/A part II</th>
<th style="background-color:cornsilk">Back to the Season</th>
<th colspan="2" style="background-color:MediumSpringGreen">Running Year</th>
</tr>
<tr>
<th>5:00pm</th>
<th rowspan="3" style="background-color:MediumOrchid ">WWII Battle Obsession</th>
<th colspan="4" style="background-color:lightyellow">The Fat Running Theory</th>
</tr>
<tr>
<th style="background-color:white;color:white">5:30pm</th>
<th rowspan="2" style="background-color:indianred">Rebel without a computer</th>
<th colspan="2" style="background-color:limegreen">Fighting Tomorrow</th>
<th colspan="3" style="background-color:gold">Episode XVI - The Laptop Run</th>
</tr>
<tr>
<th>6:00pm</th>
<th style="background-color:mistyrose">Spam TV</th>
<th colspan="3" style="background-color:indianred">The Lion</th>
<th style="background-color:mintcream">Running Yer</th>
</tr>
<tr>
<th style="background-color:white;color:white">6:30pm</th>
<th rowspan="3" colspan="5" style="background-color:honeydew">Give God Money</th>
<th rowspan="5" colspan="2" style="background-color:Fuchsia">Skinny Karaoke</th>
</tr>
<tr>
<th>7:00pm</th>
</tr>
<tr>
<th style="background-color:white;color:white">7:30pm</th>
</tr>
<tr>
<th>8:00pm</th>
<th rowspan="4" style="background-color:lavender">Eye of Thailand</th>
<th style="background-color:orange">Slept News</th>
<th style="background-color:orchid">Happy gossip</th>
</tr>
<tr>
<th style="background-color:white;color:white">8:30pm</th>
<th rowspan="3" colspan="2" style="background-color:DarkKhaki">Skinny Today</th>
<th style="background-color:orange">Slept News</th>
<th style="background-color:orchid">Happy gossip</th>
</tr>
<tr>
<th>9:00pm</th>
<th rowspan="2" colspan="3" style="background-color:Aquamarine">Soon Slept</th>
<th rowspan="5" style="background-color:brown">America's Got Laptop</th>
</tr>
<tr>
<th style="background-color:white;color:white">9:30pm</th>
</tr>
<tr>
<th>10:00pm</th>
<th rowspan="3" colspan="5" style="background-color:chocolate">Don't run there</th>
<th rowspan="3" style="background-color:violet">North Fillory Fighting
</tr>
<tr>
<th style="background-color:white;color:white">10:30pm</th>
</tr>
<tr>
<th>11:00pm</th>
</tr>
<th style="background-color:white;color:white">11:30pm</th>
<th colspan="2" style="background-color:crimson">Captain Zeloous and Adult lads</th>
<th style="background-color:yellowgreen">Grand Theft Computer</th>
<th style="background-color:gray">Zealous Rerun</th>
<th colspan="3" style="background-color:dodgerblue">Pay-Per-Download</th>
</tr>
</tbody>
I only get these types of errors,
-document type does not allow element "table" here
-document type does not allow element "th" here
You are missing the head and body tags. You need those for valid html. Your table must be contained in the body tag.
<html>
<head>
</head>
<body>
<table>
<!--All your table stuff-->
</table>
</body>
</html>
Also make sure you have all your closing tags. I noticed some missing </th> tags.
UPDATE: The xmlns attribute is required in XHTML, which you are using. You need to add said attribute to your html tag:
<html xmlns="http://www.w3.org/1999/xhtml">
<!--head,body,etc-->
</html>
This can be found on w3Schools
The source of most of the problems you're facing is missing tags. When writing in any markup or programming language, make sure you have the same number of opening tags/braces/groupings as you do closing groupings at the same time as you go along. This problem can otherwise be harder to spot in code and can have some of the worst results.
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.
Hi in the below code I am getting this Consultation Charges: but after this heading it showing this symbol.I want to remove that how to do can any one help me form this issue
Expected output:
Main heading
subheading| ->how to remove this |
updated html
<table width="100%" border="1" style="width:100%;border-collapse: collapse;text-align:center">
<tr>
<th width="12.5%"><b>Bill Particular</b></th>
<th width="12.5%"><b>Bill Sub Particular</b></th>
<th width="12.5%"><b>Doctor</b></th>
<th width="12.5%"><b>Date</b></th>
<th width="12.5%"><b>Dis. Amt.</b></th>
<th width="12.5%"><b>Charge</b></th>
<th width="12.5%"><b>No. of Times</b></th>
<th width="12.5%"><b>Amount</b></th><br>
</tr>
<tr width="100%"><th colspan=2>Consultation Charges:</th><br>
</tr><br>
</table>
You can make use of tag which displays the text like a heading..
Ex:
<html>
<table>
<tr>
<th>Bill Particular</th>
<td>Values</td>
</tr>
</table>
</html>
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've got a simple table.
<table border="1" width="100%">
<tr>
<th>Select</th>
<th>Name</th>
<th>Preview</th>
</tr>
How do I set the width so the Select and Preview be 15px and Name be rest of the width left ???
Hey now you can define in your css as like this
Css
.some{
width:15px;
}
HTML
<table border="1" width="100%">
<tr>
<th class="some">Select</th>
<th>Name</th>
<th class="some">Preview</th>
</tr>
</table>
live demo
http://tinkerbin.com/n4Q1NOXW
<table border="1" width="100%">
<tr>
<th width="15">Select</th>
<th>Name</th>
<th width="15">Preview</th>
</tr>
you can use as
<table border="1" width="100%">
<tr>
<th width="15px">Select</th>
<th>Name</th>
<th width="15px">Preview</th>
</tr>
<table border="1px" width="100%">
<tr>
<th width="15px">Select</th>
<th>Name</th>
<th width="15px">Preview</th>
</tr>
</table>
If you want to preview in any size screen according to their size, use '%' to determine the size. For ex
<table border="1px" width="100%">
<tr>
<th width="15%">Select</th>
<th>Name</th>
<th width="15%">Preview</th>
</tr>
</table>