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
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 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>).
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
#for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">#(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
Can anyone please suggest the best way to implement sorting in angular 6 using botstrap. This is my table.
I need to sort the table using mrp , ssp ,ymp .
I tried to search for tutorials , but there is angularjs implementation all over the internet .
Can anyone suggest a proper angular 6 implemetation using data table
<table id="myTable" class="table table-striped table-bordered table-dark" #myTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Id</th>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Seller</th>
<th scope="col">Category</th>
<th scope="col">Status</th>
<th scope="col" sortable="mrp.value" class="sortable">MRP
</th>
<th scope="col" class="sortable">SSP
</th>
<th scope="col" class="sortable" >YMP
</th>
<th scope="col" class="sortable">Date Added
</th>
</tr>
</thead>
<tbody *ngFor ="let tempProduct of products">
<tr>
<th scope="row"><input type="checkbox" name="cbProducts"
value=`${{tempProduct.id}}`></th>
<td>{{tempProduct.id}}</td>
<td>
<img
src="http://localhost:8080/YourMart-PMP-Admin-
Panel/resources/images/{{tempProduct.primaryImg}}"
height="50" width="50">
</td>
<td>{{tempProduct.name}}</td>
<td>{{tempProduct.seller.name}}</td>
<td>{{tempProduct.category.name}}</td>
<td>{{tempProduct.status}}</td>
<td >{{tempProduct.mrp}}</td>
<td >{{tempProduct.ssp}}</td>
<td >{{tempProduct.ymp}}</td>
<td >{{tempProduct.created}}</td>
</tr>
</tbody>
</table>
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>