I have two pieces of code. I was expecting these to have the same result, but no luck. Can someone explain this to me?
<table border=1px>
<tr>
<td width=20%>test1</td>
<td width=80%>test2</td>
</tr>
</table>
<style>
table { width:100%;}
td.1 { width:20%; }
td.2 { width:80%; }
</style>
This works as I expect. The first column is 20%, the second is 80%.
<table border=1px>
<tr>
<td class="1">test1</td>
<td class="2">test2</td>
</tr>
</table>
<style>
table { width:100%;}
td.1 { width:20%; }
td.2 { width:80%; }
</style>
This version shows column as 50/50.
Change the numbers 1 and 2 to more appropriate names. CSS names cannot begin with numbers.
<table border=1px>
<tr>
<td class="twenty-percent-width">test1</td>
<td class="eighty-percent-width">test2</td>
</tr>
</table>
<style>
table { width:100%;}
td.twenty-percent-width { width:20%; }
td.eighty-percent-width { width:80%; }
</style>
Read more here.
And for good programming practices you should never name variables, names, etc starting with a number
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
Here is how it should look
Here how it looks
`
https://codepen.io/SevastianBah/pen/VwBaPVB
`
I suppose that it is related some how to the big red block. In code inspector, there is no any margins or paddings for block.
I have gone through your code pen. You tried to demonstrate the table using nested table inside the tag. However it can may be fulfill your target. But using colspan and rowspan property you can easily demonstrate the table.
Here I have demonstrated it using colspan rowspan. Well the concept is pretty easier. Look carefully at your targeted table. There you can easily equally divided each cells in total 4 rows and 3 columns. Where the 1st cell taken two column and two row. So we declared colspan value 2 and rowspan value 2. These will allow the cell to take two rows and two column. then the rest td will represent other cells. So as 1st td taken 2 columns and two rows so in 1st and second rows total td will be 3 and 2. but in third row each td will take one cell.
In css the border collapse will remove the spaces in between. Then you can add border to each td. Go through the code below. Hope this might help you.
table{
width: 600px;
height: 400px;
border-collapse: collapse;
}
td{
border: 2px solid black
}
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table>
<tr>
<td style='background-color: red' colspan='2' rowspan='2'></td>
<td style='background-color: blue'></td>
<td style='background-color: red'></td>
</tr>
<tr>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
</tr>
<tr>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
</tr>
</table>
</body>
</html>
Float td left:
td{
margin: 0;
padding: 0;
float: left;
}
.big{
width: 240px;
height: 240px;
}
.small{
width: 120px;
height: 120px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
div{
border: 2px black solid;
}
td{
margin: 0;
padding: 0;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="/css/style.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table>
<tr>
<td><div class="big red"></div></td>
<td>
<table>
<tr>
<td><div class="small blue"></div></td>
<td><div class="small red"></div></td>
</tr>
<tr>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
</tr>
</table>
</body>
</html>
I'm a newbie learning the ways of html/css via online tutorials. Only now I've run into a little problem that I can't quite figure out, and I've tried suggestions to similar issues from this very site and more.
As the title says, my external css file just does not seem to work at all, though said code works fine if I apply it internally. I keep rereading the code trying to spot mistakes, but even css lint and codepen just seem to say I have overqualified elements, and not much else. I've tried just using the class names e.g. .Attack instead of td.Attack, but that didn't help.
The html is basically a table with some images, and I am only trying to apply a single stylesheet. Here is tcgdatabase.css
body {
background-color:transparent;
}
p {
color:#2E2435;
text-align:justify;
}
td {
text-align:left;
}
td.Name {
text-align:left;
width:250px;
font-size:30px;
font-weight:bold;
}
td.Type {
width:50px;
}
td.Stage {
text-align:left;
width:120px;
font-size:15px;
font-weight:bold;
}
td.HP,td.AP {
width:50px;
font-style:italic;
font-size:30px;
}
span.Points {
font-size:15px;
}
td.Attack,td.BaseDamage {
height:30px;
font-weight:bold;
font-size:20px;
}
td.Effect,td.Flavour {
text-align:justify;
}
td.WRR,td.WRRType {
height:20px;
font-weight:bold;
}
th {
text-align:center;
}
here is the html page, I even left the css in there enclosed with the to show how I added it internally:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>oddities</title>
<meta charset="UTF-8">
<link ref="stylesheet" type="text/css" href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css">
<!--<style>
body {
background-color:transparent;
}
p {
color:#2E2435;
text-align:justify;
}
td {
text-align:left;
}
td.Name {
text-align:left;
width:250px;
font-size:30px;
font-weight:bold;
}
td.Type {
width:50px;
}
td.Stage {
text-align:left;
width:120px;
font-size:15px;
font-weight:bold;
}
td.HP,td.AP {
width:50px;
font-style:italic;
font-size:30px;
}
span.Points {
font-size:15px;
}
td.Attack,td.Base Damage {
height:30px;
font-weight:bold;
font-size:20px;
}
td.Effect,td.Flavour {
text-align:justify;
}
td.WRR,td.WRRType {
height:20px;
font-weight:bold;
}
th {
text-align:center;
}
</style>-->
</head>
<body>
<table style="width:100%">
<tr>
<td rowspan="9" style="width:420px"><img src="CacturneR.png" style="width:350px"></td>
<td class="Type"><img src="Energy Types/Dark.png" style="width:40px"></td>
<td class="Stage">Legendary</td>
<td class="Name">Yveltal</td>
<td class="HP">110<span class="Points">HP</span></td>
<td class="AP">0<span class="Points">AP</span></td>
</tr>
<tr>
<td class"AttackCost" colspan="2">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
</td>
<td class="Attack" colspan="2">Take In</td>
<td class="BaseDamage"><td>
</tr>
<tr>
<td class="Effect" colspan="5">
Attach up to 3 Pokémon from your hand to this Pokémon and heal 10 damage from this
Pokémon times the number of Pokémon cards just attached in this way. Each Pokémon attached
in this way provides 1 Energy of their type at a time (If they have more than 1 type,
they provide Energy of each of their types, but only 1 at a time).
</td>
</tr>
<tr>
<td class"AttackCost" colspan="2">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
</td>
<td class="Attack" colspan="2">Riot Ballista</td>
<td class="BaseDamage"><td>
</tr>
<tr>
<td class="Effect" colspan="5">
Discard 1 card attached to this Pokémon. If that card is a Pokémon, this
attack does damage equal to the discarded Pokémon's HP. If it is not a
Pokémon, this attack does 50 damage and this Pokémon does 50 damage to
itself.
</td>
</tr>
<tr>
<td class="WRRType"><img src="Energy Types/Fairy.png" style="width:25px"></td>
<td class="WRR">weakness: x2</td>
<td class="Flavour" colspan="3" rowspan="3">
"This terrible beast has long since turned a blind eye to the havoc it
wreaks in its wake" - Anon.
</td>
<tr>
<td class="WRRType"><img src="Energy Types/Fighting.png" style="width:25px"></td>
<td class="WRR">resistance: -20</td>
</tr>
<tr>
<td class="WRRType"><img src="Energy Types/colourless.png" style="width:25px"></td>
<td class="WRR">retreat cost: x2</td>
</tr>
<tr>
<td class="Illus" colspan="3">Illus. NavaskaIII</td>
<td class="SetNumber">??/??</td>
<td class="Rarity">UR</td>
</tr>
</table>
</body>
</html>
I feel like I am missing something completely obvious, I really would appreciate the help!
In your link element change
ref="stylesheet" to rel="stylesheet"
notice the 'f' should be 'l'
Follow this syntax:
<link rel="stylesheet" href="style.css" type="text/css">
Path of css file has to be relative or absolute path..
Check your path to the CSS file. I would recommend using a relative path to the file.
Change href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css" to something like href="/path/to/JBSet1/tcgdatabase.css".
If the CSS file is in the same folder as the HTML file, you can just use href="tcgdatabase.css".
Edit:
As stated above, also change ref="stylesheet" to rel="stylesheet".
I have an HTML table in my web page and there may be many rows in it as it is generated dynamically. The problem i am facing is that When the row data overflows the available width, the whole table css is disturbed.
I need a solution such that if the row data overflows it should be split into multiple rows, as required to fit all the data.
The HTML is as follows:
<table>
<tr>
<td class='first' >From :</td>
<td class='second'>Gaurav Sachdeva <gauravs23#ymail.com></td>
</tr>
<tr>
<td class='first' >To :</td>
<td class='second' >nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com></td>
</tr>
<tr>
<td class='first'>Date :</td>
<td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td>
</tr>
</table>
The css is as follows:
.first{
font-size:14px;
text-align:right;
font-weight:bold;
color: grey;
}
.second{
padding-left:10px;
font-size:14px;
font-weight: bold;
color: black;
}
All css gurus out there....please help!
The problem as I see it is really that “From :” and “To :” and “Date :” may each get split to two lines. To fix this, add
.first { white-space: nowrap; }
To fix another layout issue, which you did not ask about, consider adding this, too:
td { vertical-align: top; }
If the email recipient list in the data is really of the format in the example, it’s a bit odd and will be rendered oddly, as a line break may be inserted by a browser at any space but not after “>”. It is more normal to separate addresses by a comma or a semicolon and a space. If you cannot use spaces the, the practical choice is to insert <wbr> tags at allowable breakpoints, as in John Doe <foo#example.com><wbr>Jane Doe <bar#example.com>.
just replace this css with the below one
Or Set Width For Your Table I Can See That There To Width defiened For Your Table. Width May Fix The Problem
.first
{
font-size:14px;
text-align:right;
font-weight:bold;
color: grey;
}
.second
{
padding-left:10px;
font-size:14px;
font-weight: bold;
color: black;
overflow:hidden;
}
ok check here now
<style>
.first{
font-size:14px;
text-align:right;
font-weight:bold;
color: grey;
}
.second{
padding-left:10px;
font-size:14px;
font-weight: bold;
color: black;
overflow:hidden;
}
</style>
<table cellspacing="5px" cellpadding="5px" style="width:525px;">
<tr>
<td class='first' style="width:57px;">From :</td>
<td class='second'>Gaurav Sachdeva <gauravs23#ymail.com></td>
</tr>
<tr>
<td class='first' style="width:57px;">To :</td>
<td class='second' >nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com>nerdsachdeva#gmail.com
<nerdsachdeva#gmail.com></td>
</tr>
<tr>
<td class='first' style="width:57px;">Date :</td>
<td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td>
</tr>
</table>
I have looked through all the answers posted but I cant seem to get this code to work correctly. I am trying to get the individual cell to change color when I hover over it, but I don't have access to the .css with the service we are using. I am being forced to drop an HTML code box that I can paste my code into specific to the element I am changing, but not the entire .css file...just that element.
Here is my code. Any help in getting the background to change to #ff0000 and the Text to change to #000000 when I roll over the cell would be greatly appreciated.
(It is ultimately my intent to add a >a href for each of the cells as well, but I am trying to do this one step at a time. The >a href will (I hope) add the selected cell to a shopping cart.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<style type="text/css">
body {
background: #000;
}
#wrap {
margin: 0 auto; /* margin 0 auto will center that box in your document */
width: 780px; /*size of your box*/
background: #000;
text-align: center; /* everything will be written in that box will be centered horizontally*/
}
</style>
<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
In CSS:
td:hover {
background-color: #ff0000;
color: #000000;
}
Or you can use JavaScript/jQuery:
$(document).ready(function() {
$("td").hover(
function() {
$(this).css('background-color', '#ff0000');
$(this).css('color', '#000000');
},
function() {
$(this).css('background-color', 'none');
$(this).css('color', 'black'); // or whatever your original color was
}
);
});
Wrap the cell data with a div (class="cell_hvr") and a link around the content.
.cell_hvr {
padding: 2px;
width: 100%;
height: 100%;
}
.cell_hvr a {
display: block;
text-decoration: none;
}
.cell_hvr a:hover {
background-color: red;
}
<div class="cell_hvr"> (Your content) </div>
You can do this by giving each cell a class
<td class="a">..</td>
and then styling it
<style>
td.a { background-color:#ff0000; }
td.a:hover { background-color:#000000; }
</style>
CSS: td:hover, th:hover { background:#ff0000; color:#000; }
I was looking for the JavaScript version of the answer to this question. But, I am not using JQuery..
I have
oCell = newRow.insertCell();
oCell.style.background = tintTest(myCounts[i]);
myCounts is just an array holding an Int..
but now i just wanted to add the hover background color to my current oCell before smashing it in line and moving on with the loop......
So I found the code below as the only checked answer in a stream of 'can't be done'.. just not sure if this would even help me.
var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
EDIT!!! I just found out my issue (I hope the code snip helps with yours still) I tried to add the hover in CSS and it just isn't supported at all.
How can entire table cell be hyperlinked in html without javascript or jquery?
I tried to put href in td tag itself but its not working at least in chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
Try this way:
<td> </td>
Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.
<td onclick="location.href='yourpage.html'">Link</td>
Here is my solution:
<td>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)
Problems:
(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
My Suggestion to complete answer of (User: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.
<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
<table style="margin-left: auto; margin-right: auto;" align="center">
<tr>
<td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
</tr>
</table>
</a>
If you want use this way in php Do the following
<?php
echo ("
<script type = 'text/javascript'>
function href() {
location.href='http://localhost/dept';
}
</script>
<tr onclick='href()'>
<td>$id</td>
<td>$deptValue</td>
<td> $month </td>
<td>100%</td>
</tr>
");
?>