I am trying to create normal html table, row with two column and column with six row.
I want to create html table according to above pic.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">
<tr align="center" >
<th style="padding:2.5px; width: 10%;" rowspan="2">S No</th>
<th style="padding:2.5px; width: 55%;" rowspan="2">Subject</th>
<th style="padding:2.5px;" colspan="2">Term-1</th>
<th style="padding:2.5px;" colspan="2">Term-2</th>
</tr>
<tr>
<th>PA1</th>
<th>Notebook</th>
<th>PA2</th>
<th>Notebook2</th>
</tr>
</table>
</body>
</html>
Related
My line in turquoise color must be 5% width and I see it's a lot more? Why do I have this problem? Why the widths of each color are not respected?
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<br><br>
<div class="table-responsive" *ngIf="strikes.length > 0">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" style="width: 44%; text-align: center;">CALL</th>
<th class="exoPrice" scope="col" style="width: 12%;background-color: #dee2e657;">
</th>
<th scope="col" style="width: 44%; text-align: center">PUT</th>
</tr>
<tr>
<th scope="col" style="width: 3%; background-color: aqua;"></th>
<th scope="col" style="width: 25%; background-color: green;">Quantity</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
If you want to have various width for the table cells, you need to have multiple tables.
Make sure that the width of all cells add up to 100%. So if you want to achieve a table row with a cell of 5% and another cell with 25% width, you need to have a third empty cell with 70%.
I have added background-color orange for the third cell in this case just for the visibility, but you can remove that.
<div class="table-responsive">
<table class="table table-striped" style="width:100%">
<tr>
<td scope="col" style="width: 44%; text-align: center;">CALL</td>
<td class="exoPrice" scope="col" style="width: 12%; background-color: #dee2e657;"></td>
<td scope="col" style="width: 44%; text-align: center">PUT</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td scope="col" style="width: 5%; background-color: aqua;"></td>
<td scope="col" style="width: 25%; background-color: green;">Quantity</td>
<td scope="col" style="width: 70%; background-color: orange;"></td>
</tr>
</table>
</div>
I'm trying to add 3 columns under 'Top 10' table header but when I add values for cells everything gets corrupt
also there's an empty cell just before the 'ID' cell, I don't know where it came from
<html>
<head>
<title>ss</title>
<style>
table { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }
</style>
</head>
<body>
<center>
<table border="1">
<thead>
<tr>
<th align="center">
<font face="Arial, Helvetica, sans-serif"></font>
</th>
<th align="center">
<font face="Arial, Helvetica, sans-serif">Site</font>
</th>
<th colspan="4" align="center">
<font face="Arial, Helvetica, sans-serif">Top 10</font>
</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif">1</font>
</td>
<td align="center">
<font face="Arial, Helvetica, sans-serif">example</font>
</td>
<td>
<td>ID</td>
<td >Name</td>
<td>From</td>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
your help is appreciated
The HTML of your table is completely off. Make sure you use the right elements and close everything too. And try to apply styling with CSS as much as possible.
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
}
<table>
<thead>
<tr>
<th></th>
<th>Site</th>
<th colspan="3">Top 10</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">Example</td>
<td>ID</td>
<td>Name</td>
<td>From</td>
</tr>
<tr>
<td>1</td>
<td>Kobo</td>
<td>Jack</td>
</tr>
</tbody>
</table>
you really need to read html specification, font and center tags have several years obsolete, you need to use CSS instead
<!DOCTYPE html>
<html>
<head>
<title>ss</title>
<style>
body {font: "Arial, Helvetica, sans-serif"}
table { width: 90%; border-collapse: collapse; margin: 0 auto;}
td { border: 1px solid #000; }
td.center, th { text-align: center;}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th colspan="4">Header 3</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td class="center">Cell 1</td>
<td class="center">Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody>
</table>
</body>
</html>
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>
This is an excert from a dynamically built table. What is the proper CSS to make the first <td> in the second rwo (id='backdate') a fixed width? (currently it does not change width when increasing or decreasing the 70 value)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table class='fifo' width='850' style='width:850px;table-layout:fixed;'>
<thead><tr>
<th colspan='3' style='width:820px;'>Details</th>
<th style='cursor:pointer;width:15px;' title='Click to save.'><span class='ui-icon ui-icon-check'/></th>
<th style='width:15px;' title='Click to close.'><span class='ui-icon ui-icon-closethick'/></th>
</tr></thead>
<tbody>
<tr><td id='BACKDATE' colspan='1' class='button' style='cursor:pointer;width:70px;' width='70' title='Back Date Start Date/time.'>Back Date</td>
<td colspan='4' style='width:780px;' width='780'><b>Start Date: </b></td></tr>
</tbody>
</table>
</body>
</html>
FIDDLE WITH SOLUTION...
Adding a dummy row with the widths that the browser 'displays', but isn't seen solves the problem. To get rid of the extra border, I had to add border-top-width:0px; to the table's style.
HTML
<tr>
<th class='test' style='width:80px;'/>
<th class='test' style='width:560px;'/>
<th class='test' style='width:150px;'/>
<th class='test' style='width:15px;'/>
<th class='test' style='width:15px;'/>
CSS
.test {
padding:0px!important;
border-width:0px!important;
height:0px!important;
}
I am making a calendar using the following HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<table border="1">
<tr>
<td colspan="2">Mon</td>
<td colspan="2">Tue</td>
<td colspan="2">Wed</td>
<td colspan="2">Thu</td>
<td colspan="2">Fri</td>
</tr>
<tr>
<td colspan="1">Item1</td>
<td colspan="9">Item2</td>
</tr>
</table>
</body>
Each day has a colspan of 2 so that I can show whether an item takes place just in the morning or for a whole day etc.
In the above example I want "Item1" to show in the first cell (Mon morning) and "Item2" to show from Mon afternoon through to Fri.
However, when viewing the output, "Item1" is taking up the whole of Mon and "Item2" is displaying from Tue to Fri.
Is it possible to do what I am trying to do?
Thanks
I think the problem is that you'll actually have to have a row with colspan="1" in order for your spans to actually work.
If you're actually representing am/pm in your calendar, why not just add a row under the "Mon Tue ... Fri" row, like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
td,th { min-width: 50px; }
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="2">Mon</th>
<th colspan="2">Tue</th>
<th colspan="2">Wed</th>
<th colspan="2">Thu</th>
<th colspan="2">Fri</th>
</tr>
<tr>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">Item1</td>
<td colspan="9">Item2</td>
</tr>
</tbody>
</table>
</body>
</html>
I also put the headers into a <thead> and the actual items into a <tbody>, and made the headers <th> tags instead of <td>.
Try this:
<td colspan="1">Item1</td>
<td colspan="1"> </td>
<td colspan="8">Item2</td>