Using external .css for html styling - html

I have an issue that I cannot link my external style.css to my index.html file. Both files are in exact same directory.
My style.css :
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
And I am trying to link it in my html as following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
Full html script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<br>
<table id="t1">
<caption>Operation table</caption>
<thead>
<tr>
<th>Operation code</th>
<th>To Do</th>
<th>Done</th>
<th>Left</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>1000</td>
<td>50</td>
<td>
</td>
</tr>
<tr>
<td>def</td>
<td>555</td>
<td>50</td>
<td id ="number1">
</td>
</tr>
</tbody>
</table>
<p id="demo"></p>
</html>
All the examples that I have looked up online use exact same method.
I have connected to the webserver and turned on developer mode to see if I can see anything. I have managed to spot an error:
Refused to apply style from '192.168.10.173:8080/style.css' because its MIME type ('text/html') is not supported stylesheet MIME type, and strict MIME checking is enabled
Still looking into why it could be caused

CSS files shouldn't have style tags. Simply remove them and it'll work.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
When you want to declare styles inside of an HTML file, then you have to put the CSS between style tags.

Related

JavaScript date picker in HTML table

I have built a Prediction table which will contain football data. Please I need a JavaScript date picker code that will fit into this table I built.
table,
th,
td {
border: 0px solid black;
border-collapse: collapse;
}
table {
width: px;
}
th {
color: white;
background-color: black;
}
th,
td {
font-size: 25pt;
font-family: Arial;
text-align: center;
}
td {
background-color
<table>
<tr>
<th colspan="2"><b>England » Premier</b></th>
<th><b>Prediction</b></th>
</tr>
<tr>
<td> 24-06:20:16</td>
<td>Red Bull Bragantino <b style="color:red"> 2 : 1 </b> Ponte Preta</td>
<td style="background-color:none;color:none;"><b>Home Win</b></td>
</tr>
</table>
I will be grateful if someone could help me out.
I advice to actually try and look for solutions.
Below is the solution to your question where the website i gave actually thought you step by step to create a datepicker.
First of all you will need jquery to be able to use datepicker. There is few ways for you to get jquery datepicker CSS & JS file. For me, i prefer using CDN as it is much conveniet. Usually JS scripts are recommended to be placed before the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table>
<tr>
<th><b>Datepicker</b></th>
</tr>
<tr>
<td>Date:</td>
<td><input type="text" id="datepicker"></td>
</tr>
</table>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>

Why is my css after the first ruleset not being applied?

For the past few days I have been experiencing a mysterious problem. I have defined some css, and after the first ruleset it is not being applied. So I wrote some basic css here to see if there still is a problem, and there was. Is there a simple mistake I have been making?
style.css
div {
background: linear-gradient(to top, lightblue, white);
};
th {
text-align: left;
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div>
<table>
<tr>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>Toothbrush</td>
<td>2</td>
</tr>
<tr>
<td>Shaving Cream</td>
<td>1</td>
</tr>
</table>
</div>
</body>
</html>
Do not use ; in your CSS after the closing }.

I have a table and why my center cell is longer than others

I am working on a project in which I have to make a webpage. I have a table and when I run the code, the center cell is longer than the other cells.
table,td,tr{border: 1px solid red; }
<!document html>
<html>
<body>
<head>
<title>calculatoer</title>
<meta charset="utf-8">
</head>
<div>
<table>
<tr><th>ali</th><th>mohammad</th></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
</table>
</div>
</body>
</html>
You can add the following code to the existing code:
<table style="table-layout: fixed ;width: 100% ;">
<td style="width: 25% ;">
In addition to ensuring the header matches the number of columns via colspan you can fix the width by a percentage or a specific size using the td CSS class.
table,td,tr{border: 1px solid red; }
td
{
width: 100px;
}
<!document html>
<html>
<body>
<head>
<title>calculatoer</title>
<meta charset="utf-8">
</head>
<div>
<table>
<tr><th colspan="3">ali mohammad</th></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
</table>
</div>
</body>
</html>

CSS Immediate Child Selector Not Selecting [duplicate]

This question already has answers here:
Why doesn't table > tr > td work when using the child selector?
(2 answers)
Closed 4 years ago.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
table > tr > th {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
</body>
</html>
I just can't see why the text in the cells are not red. Could you show me what i am missing.
Try table tr th instead of table > tr > th because a tbody element is added as a parent element to tr by the browser and since the direct child selector > is used, it won't style the th
table tr th {
color: red;
}
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
What you have are table headers. Firstly, if you want a table cell, use the <td> tag. You do not have to use table > tr > td. If you want to color specific cells, use a class to identify them:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.cells {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td class="cells">a</td>
<td class="cells">b</td>
</tr>
</table>
</body>
</html>
If not, just use the tag:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
td {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
</body>
</html>
I hope this is what you wanted.

iframe on div container not working as expected on IE8/firefox45.9

I'm trying to make a page navigation as portable as possible. I'm using Chrome 58 and the page is displayed as expected: the iframe is resized according to the td container, but is not working in IE and firefox which displays the iframe in the middle of the cell. Here is my code.
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="language" content="ES">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css.css" type="text/css" rel="stylesheet">
<script src="js.js" type="text/javascript" charset="UTF-8"></script>
<title>Mi sitio</title>
</head>
<body>
<table id="navUI">
<tr>
<td id="navHeader" colspan="2">Tema general</td>
</tr>
<tr>
<td id="MenuHeader">Menú</td>
<td rowspan="4"><iframe src="intro.htm" id="navField"></iframe></td>
</tr>
<tr>
<td class="MenuItems" onclick="navPage('page1'); return false;">Item 1</td>
</tr>
<tr>
<td class="MenuItems" onclick="navPage('page2'); return false;">Item 2</td>
</tr>
<tr>
<td class="spander"> </td>
</tr>
</table>
</body>
</html>
CSS:
#charset "utf-8";
html, body, table {
padding:0;
margin:0;
height:100%;
width:100%;
}
body {
font:12px Verdana, Arial, Sans-serif;
}
table#navUI, td {
border:1px solid black;
}
td#navHeader {
text-align:center;
height:30px;
}
td#MenuHeader {
width:10%;
text-align:center;
}
td.MenuItems {
width:10%;
}
td.MenuItems:hover {
background-color:#BDBEE1;
cursor:pointer;
}
td.spander {
width:10%;
height:100%;
}
#navField {
border:none;
height:100%;
width:100%;
}
The idea is to keep pure html and css without jquery. Thanks for the help.
Add this to the td which contains the iframe:
vertical-align:top;height:100%;
Here's a fiddle which works in Firefox:
https://jsfiddle.net/3urm8kx8/1/