Let's say I have some html codes like this
<table>
<thead>
<th role="col">Candidate</th>
<th role="col">Party</th>
<th role="col">Total receipts</th>
<th role="col">Total disbursements</th>
<th role="col">Cash on hand</th>
<th role="col">Source reports</th>
</thead>
</table>
If I try opening this html file with a browser, it would automatically add a <tr> tag wrapping the <th> tags, and now the DOM would be like this
<table>
<thead>
<tr>
<th role="col">Candidate</th>
<th role="col">Party</th>
<th role="col">Total receipts</th>
<th role="col">Total disbursements</th>
<th role="col">Cash on hand</th>
<th role="col">Source reports</th>
</tr>
</thead>
</table>
How do I prevent this browser's behavior? I want it to open the file exactly as the source code is, even if it's broken codes.
Related
I have a homework, I tried to solve it and I'm not successful so I want to ask you for help, who could help me?
<table border="1">
<caption>
Waarnemeningen-
<time id="nu"></time>
<br>
België
</caption>
<thead>
<tr>
<th rowspan="2">Region</th>
<th rowspan="2">Plaats</th>
<th rowspan="2">Temp</th>
<th colspan="2">Wind</th>
</tr>
<tr>
<th>Snelhied</th>
<th>Richting</th>
<th>Druk / trend</th>
</tr>
</thead>
https://imgur.com/a/LVB0ysF
Code: codepen.io/Kxamil/pen/wvvwPEN
this is how it should look like
https://imgur.com/sunyU7h
you need to read more about the rowspan and colspan which you can find here
and here's the code that match the given design
<thead>
<tr>
<th rowspan="2">Region</th>
<th rowspan="2">Plaats</th>
<th rowspan="2" colspan="2">Temp</th>
<th colspan="3">wind</th>
<th colspan="2" rowspan="2">Druk / trend</th>
<th rowspan="2">Druk / trend</th>
</tr>
<tr>
<th>Snelhied</th>
<th colspan="2">Richting</th>
</tr>
</thead>
hope this help
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 can't seem to align the table head with the table body.
This is for my project making a web-type student data-storing database.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">NIM</th>
<th scope="col">Nama</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Alamat</th>
<th scope="col">Nama Bapak</th>
<th scope="col">Nama Ibu</th>
<th scope="col">Jurusan</th>
<th scope="col">Prodi</th>
<th scope="col">IPK Terakhir</th>
<th scope="col">Hapus</th>
</tr>
</thead>
<tbody *ngFor="let mhs of mhss">
<a routerLink="/detail/{{mhs.id}}">
<tr>
<td>{{mhs.id}}</td>
<td>{{mhs.nim}}</td>
<td>{{mhs.name}}</td>
<td>{{mhs.jk}}</td>
<td>{{mhs.alamat}}</td>
<td>{{mhs.nama_bapak}}</td>
<td>{{mhs.nama_ibu}}</td>
<td>{{mhs.jurusan}}</td>
<td>{{mhs.prodi}}</td>
<td>{{mhs.ipk}}</td>
<td><button class="delete" title="delete mhs"
(click)="delete(mhs)">HAPUS</button></td>
</tr>
</a>
</tbody>
</table>
My image:
Your code is generating a new <tbody> for every item in your array. Add the *ngfor structural directive to your table rows (<tr>).
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 have the following problem in HTML.
I have this table that contains only a thead:
<table border="1" class="table_legenda" width="100%">
<thead>
<tr>
<th width="8.33%">Codice</th>
<th width="2%">Stato</th>
<th width="8.33%">Creazione<</th>
<th width="8.33%">Registrazione</th>
<th width="6.33%">Autore Cr</th>
<th width="6.33%">Autore Con</th>
<th width="6.33%">Autore Acq</th>
<th width="8.33%">Totale Imponibile</th>
<th width="24.66%">Fornitore</th>
<th width="4.33%">RM riserva</th>
<th width="8.33%">Errore</th>
<th width="8.33%">Azione</th>
</tr>
</thead>
</table>
Now, as you can see, every th cell have setted a percentual width and contains a textual value.
My problem is that if the textual value of a cell is longer than the available space of the cell it will be automatically hidden. I want that the text is automatically wrapped to a new line.
How can I do to obtain this behavior?
Tnx
You need to set the table to have a table-layout:fixed and the th elements to be overflow-wrap:break-word
.table_legenda {
table-layout: fixed;
}
.table_legenda th {
overflow-wrap: break-word;
}
<table border="1" class="table_legenda" width="100%">
<thead>
<tr>
<th width="8.33%">Codice</th>
<th width="2%">Stato</th>
<th width="8.33%">Creazione</th>
<th width="8.33%">Registrazione</th>
<th width="6.33%">Autore Cr</th>
<th width="6.33%">Autore Con</th>
<th width="6.33%">Autore Acq</th>
<th width="8.33%">Totale Imponibile</th>
<th width="24.66%">Fornitore</th>
<th width="4.33%">RM riserva</th>
<th width="8.33%">Errore</th>
<th width="8.33%">Azione</th>
</tr>
</thead>
</table>
demo at http://jsfiddle.net/ma4bc7zj/