fontawesome icon not showing inside html table <th> - html

I am trying to add an icon inside one of the headers of my html table. This is my code:
<div id="dialog_box">
<table id="req_header" border="2">
<tr>
<th><i class="fa-solid fa-list-check"></i></th>
<th>Table</th>
<th>QtrID</th>
<th>Requested by</th>
<th>Reason</th>
</tr>
</table><br>
<button id="delete_qtrid">Delete</button>
</div>
Strangely the icon isn't showing after executing the code. I have also included my kit code:
<script src="https://kit.fontawesome.com/03d58ba9c7.js" crossorigin="anonymous"></script>
inside my <head></head> section in my html file. Where am I going wrong? Please help me.
EDIT: Screenshot:

Related

Some of HTML tags are not working properly in Angular 12

I don't have any error regarding this issue. But this is the proof that my tag is not working.
This is literally my HTML file. There is no error in my cmd and all its just h1, h2 and so on tags doesn't work. The reason is still unknown to me.
<app-header></app-header>
<div class="container">
<h1>Customer List</h1> <!--This is not working properly-->
<table class="table ">
<tr>
<th>Name</th>
<th>Contact Number</th>
<th>Address</th>
<th>Valid ID</th>
<th>Credit Limit</th>
<th>Consignment</th>
<th></th>
</tr>
<tbody>
<tr *ngFor="let x of customer">
<td>{{x.Fname}} {{x.Mname}} {{x.Lname}}</td>
<td>{{x.Contact_no}}</td>
<td>{{x.Address}}</td>
<td>{{x.Valid_id}}</td>
<td>{{x.Credit_Limit}}</td>
<td>{{x.total}}</td>
<td><button class="btn btn-outline-danger w-100" (click)="pick(x.CustomerID)">PICK</button></td>
</tr>
</tbody>
</table>
</div>
The Customer List on top is in html tag but it doesn't work. I am using angular 12 btw
Also I install an angular material to my project for the <mat-slide-toggle> because I need it, but after I installed it I see no problem with the tags but today (or yesterday)

Why does the link appear before the table when it's after it in the HTML?

<!DOCTYPE html>
<html>
<head>
<title>Firecore's Profile</title>
</head>
<body>
<div style="background-color:#DC143C; text-align:center">
<p><h1>Firecore Starblade</h1></p>
</div>
<p style="text-align:center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz83KYRPqRKFLb4rtJdS6JzGL-OZ-OhSVE5nOz1Q7CZ3seOe1-"; width="10%" ; height="10%">
</p>
<div>
<table border="1px" align="center">
<thead style="background-color:#DC143C">
<tr>
<th>Attributes</th>
<th>HP</th>
<th>AP</th>
<th>Dex</th>
<th>Str</th>
<th>Int</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#DC143C"><strong>Value</strong></td>
<td>100</td>
<td>50</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody
</table>
</div>
<div style="text-align:center">
Back
</div>
</body>
</html>
Just starting out learning HTML. Making a practice site and ran into this problem. Tried googling it but unable to locate the cause. Not understanding why the "Back" HyperLink is showing above the table instead of below. I thought maybe it was because of the uses of p and div elements but i tried different combos with no luck. Thanks for your help in advance.
This seems like a simple problem, but it's actually really interesting. On a simple level, the problem is that the </tbody> tag is missing the closing >. Put it in and your code works.
But the more interesting question is why?
Well, it turns out that the problem is that you are in fact not closing the table tag. Your missing > essentially means you have a tag that looks like this: </tbody </table>. That's one tag and the browser will think "ah, we're closing the tbody and we've got some other stuff that doesn't make sense here so we're going to ignore it."
So you never actually close the table tag. This means that you now have some invalid markup in your table. To be precise, the following code is now part of your table's code:
</div>
<div style="text-align:center">
Back
</div>
</body>
</html>
This is handled according to the rather obscure rules listed here in the HTML5 specification section "Unexpected markup in tables". The basic meaning of all that specification (which the W3C confesses is "for historical reasons, especially strange") is that all the unexpected/invalid markup inside the table gets put before the beginning of the table.
That's why your link does the surprising thing of moving before the table. A simple mistake (the missing >) has ended up sending your browser down a whole rabbit warren of mistaken parsing.
This is because you have a broken close tag for tbody.
<div style="background-color:#DC143C; text-align:center">
<p>
<h1>Firecore Starblade</h1>
</p>
</div>
<p style="text-align:center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz83KYRPqRKFLb4rtJdS6JzGL-OZ-OhSVE5nOz1Q7CZ3seOe1-" ; width="10%" ; height="10%">
</p>
<div>
<table border="1px" align="center">
<thead style="background-color:#DC143C">
<tr>
<th>Attributes</th>
<th>HP</th>
<th>AP</th>
<th>Dex</th>
<th>Str</th>
<th>Int</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#DC143C"><strong>Value</strong>
</td>
<td>100</td>
<td>50</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align:center">
Back
</div>
Close your
https://jsfiddle.net/Delorian/pygbjfk6/
</tbody>
P.S. using JS Fiddle or a similar tool is a good way to learn HTML & CSS, as is getting to grips with Developer Tool in Chrome for manipulating HTML, CSS & JS on the fly.

Having issues with ng-href i can use target="_blank" using AngularJS 1.2

I have issues with data values in a table and I'm trying to wrap the data in anchor tags so that it can be a downloadable link i tried to use ng-href but i can use target. is there an easier way of doing this? i was the data to show normally on the browser and have use click on it to download an image. but it shows an ugly anchor tag as well :/ this is my code with normal a href
i have tried using this as well, which was an answer for angular.js link behaviour - disable deep linking for specific URLs
<td><a target="_self" href="//tomcmmsweb.pca.com/DocumentLibrary/Download/{{item.documentId}}">{{item.jobNumber}}</a></td>
but above still didnt work. im using angularJS 1.2.16, im running out of ideas and im notthat much of an expert with angularJS. would really appreciate some knowledge.
<table class="table table-striped table table-hover">
<thead>
<tr>
<th>Project Manager</th>
<th>Job Number</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in counce">
<td>{{item.projectManager}}</td>
<td>{{item.jobNumber}}</td>
<td>{{item.description}}</td>
<td>{{item.totalAmount*1000 | currency}}</td>
</tr>
</tbody>
</table>

Attaching an Href to a row inside a table

I am using html in a .php file to code. I have a statement:
<html>
<tr>
<td>Hi<td>
<td>Test<td.
</tr>
</html>
How can I attach an href to the row? Simply adding href in the tag didn't work. Anybody know how? Note: The table was defined earlier in the code this is the snip-it portion of the row.
You do not attach href to row instead you better do as
<table class="table table-stripped">
<tr class="selectedRow">
<td>Hi</td>
<td>Test</td>
</tr>
</table>
then using jquery :
$('.selectedRow').click(function(){
alert('do something');
});
View LiveWeave

backbone js append view [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Backbone js: How to remove extra tag in view?
How come whenever I append a new backbone view to an HTML element, it automatically surrounds this view with a <div> </div>?
For example I have a table in my HTML page
<table class="table table-hover">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody id="tbl">
</tbody>
</table>
Now in my backbone controller, I perform the following
$("#tbl").append(new tblview().render().el);
and in the actual view's HTML template I have
tblview.html
<tr>
<td>entry3</td>
<td>entry4</td>
</tr>
Now when i look at this in the browser, and inspect the html element.. it renders like this:
<table class="table table-hover">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody id="tbl">
<div>
<tr>
<td>entry3</td>
<td>entry4</td>
</tr>
</div>
</tbody>
</table>
and thus is becomes all out of line? How can I fix this issue??
I want it to render the view without these extra <div> </div> in the table.
Backbone automatically create a div to surround any view. To overwritte the default, you need to set the tagName attribute when you extend a view. http://backbonejs.org/#View-extend
Backbone.View.extend({
tagName: "tr"
});
Your template doesn't need to include the tr tags. tblView should have tagName set to tr.