I'm very new to HTML and CSS. This is an example directly taken from Jon Duckett's book.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
table {
width: 600px;}
th, td {
padding: 7px 10px 10px 10px;}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;}
tr.even {
background-color: #efefef;}
tr.hover {
background-color: #c3e6e5;}
.money {
text-align: right;}
</style>
</head>
<body>
<h1>First Edition Auctions</h1>
<table>
<tr>
<th>Author</th>
<th>Title</th>
<th class="money">Reserve Price</th>
<th class="money">Current Bid</th>
</tr>
<tr>
<td>E.E. Cummings</td>
<td>Tulips & Chimneys</td>
<td class="money">$2,000.00</td>
<td class="money">$2,642.50</td>
</tr>
<tr class="even">
<td>Charles d'Orleans</td>
<td>Poemes</td>
<td class="money"></td>
<td class="money">$5,866.00</td>
</tr>
<tr>
<td>T.S. Eliot</td>
<td>Poems 1909 - 1925</td>
<td class="money">$1,250.00</td>
<td class="money">$8,499.35</td>
</tr>
<tr class="even">
<td>Sylvia Plath</td>
<td>The Colossus</td>
<td class="money"></td>
<td class="money">$1,031.72</td>
</tr>
</table>
</body>
</html>
You can view the output here, with the hover there also not working.
It looks like the example on his website works fine. I'm not sure what I did wrong in my code. It looks fine.
Browser I'm using is Chrome 48.0.2564.97.
:hover is a pseudo-class.
It is preceded by a colon (:) not a period (.)
Use :hover instead of .hover (.hover matches tag with class="hover")
tr:hover {
background-color: #c3e6e5;}
Your issue is you called out a class instead of declaring a state.
tr.hover {background-color: #c3e6e5;}
Should be
tr:hover {background-color: #c3e6e5;}
The period in your original version calls out a class that doesn't exist.
It should read
tr:hover {background-color: #c3e6e5;}
not
tr.hover {background-color: #c3e6e5;}
Related
I created a Prediction table for my website but I want an automatic updated for my table from livescore. Please can anyone help me with the right code
This is the html table
<!DOCTYPE html>
<html lang="en">
<body>
<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 <td style="background-color:none;color:none;"><b>Home Win</b></td>
</tr>
</table>
</body>
</html>
This is the css code
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
I have this simple html code. I am simply trying to format the colors but none of the CSS is actually formatting it.
I've tried changing the variables names, changing the table class to id and vice-versa.
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child td {
font-size: 30px;
background-color: red;
color: green;
}
#cell-style {
font-size: 8px;
text-align: left;
}
</style>
</head>
<html>
<body>
<table class="cool-table">
<tr>
<th id="cell-style">Fruit</th>
<th id="cell-style">Price</th>
</tr>
<tr>
<th id="cell-style">Apples</th>
<th id="cell-style">$10</th>
</tr>
<tr>
<th id="cell-style">Banana</th>
<th id="cell-style">$50</th>
</tr>
<tr>
<th id="cell-style">Mango</th>
<th id="cell-style">$20</th>
</tr>
</table>
</body>
</html>
It should show the entire table background as blue and the text should be purple. The first row's text should be large with a red background and green text. The rest of the cells should have a blue background with purple text and size 8px font.
Change your header cells to th and the normal cells to td. That way you do not need a id, class or tr:first-child to separate the header row from the rest. Note that if you use id, you should only use it on a single HTML tag. For multiple tags use class instead.
<html>
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table th { /* Changed to th, no need for tr:first-child */
font-size: 30px;
background-color: red;
color: green;
}
.cool-table td { /* Styling td-tags (table cells) */
font-size: 8px;
text-align: left;
}
</style>
</head>
<body>
<table class="cool-table">
<tr>
<th>Fruit</th> <!-- Keep as th -->
<th>Price</th>
</tr>
<tr>
<td>Apples</td> <!-- Changed to td -->
<td>$10</td>
</tr>
<tr>
<td>Banana</td>
<td>$50</td>
</tr>
<tr>
<td>Mango</td>
<td>$20</td>
</tr>
</table>
</body>
</html>
You can simply do it this way :
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child {
background-color: red;
color: green !important;
}
.cool-table tr:not(:first-child) {
font-size: 8px;
text-align: left;
}
<table class="cool-table">
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<th>Apples</th>
<th>$10</th>
</tr>
<tr>
<th>Banana</th>
<th>$50</th>
</tr>
<tr>
<th>Mango</th>
<th>$20</th>
</tr>
</table>
The first-child has a red background and green color, and everything that is NOT the first child gets a font-size of 8 and is aligned to the left.
There are several issues to look at.
style tag belongs in head tag which belongs in the html tag.
You can't use multiple ids in the same document - they're supposed to be unique. Try using a class like below.
the second css block doesn't do anything. Maybe you want to remove the td from the selector like below?
Several of your styles are not being applied because they override each other. Try making the selectors more specific to give them higher precedence.
You really want to understand the structure of html documents. You can verify them using the w3 validator
You can also learn more about CSS from Mozilla.
<!doctype html>
<html><head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child { /* removed 'td' */
font-size: 30px;
background-color: red;
color: green;
}
.cell-style { /* changed to class */
font-size: 8px;
text-align: left;
color: yellow;
}
</style>
</head><body>
<table class="cool-table">
<tr>
<th class="cell-style">Fruit</th>
<th class="cell-style">Price</th>
</tr>
<tr>
<th class="cell-style">Apples</th>
<th class="cell-style">$10</th>
</tr>
<tr>
<th class="cell-style">Banana</th>
<th class="cell-style">$50</th>
</tr>
<tr>
<th class="cell-style">Mango</th>
<th class="cell-style">$20</th>
</tr>
</table>
</body>
</html>
I have been trying to work out getting a similar table to a picture that I have been studied from. Which looks like:
However I have been getting something similar:
This is what I have done:
However im getting issues when it comes to:
Underscore line under the bold text, Which I managed to only get on a small text which I wish to get in the whole line
Also I want to adjust the Size of the table so it gets stuck like in the first picture. I don't know if I did the correct way now but I assume iam on the correct way. Maybe someone here can help me out seeing the issue.
table {
border: 1px solid black;
background-color: #ffcc99;
}
tr.hello {
background-color: #000000;
color: #ffffff;
}
tr.bigtext {
font-weight: bold;
}
</style>
</head>
<body>
<h5>Tabell 2</h5>
<table style="width:100%">
<tr class="bigtext">
<td><u>Studenter</u></td>
<td><u>17000</u></td>
</tr>
<tr>
<td>Högskoleingejör</td>
<td>2800</td>
</tr>
<tr>
<td>Ekonomi</td>
<td>1800</td>
</tr>
<tr>
<td>Fristående kurser</td>
<td>8300</td>
</tr>
<tr class="hello">
<td>Cirka 600 utländska studenter ingår i det totaala antalet studenter</td>
</tr>
</table>
</body>
</html>
You have done all almost correct, except you should:
not underline the border stuff.
not use <u> tags.
use the colspan for the full width.
And your code seems to be incomplete. Here's your updated code:
table {
border: 1px solid black;
background-color: #ffcc99;
}
tr.hello {
background-color: #000000;
color: #ffffff;
}
tr.bigtext td {
font-weight: bold;
border-bottom: 1px solid #000;
}
<h5>Tabell 2</h5>
<table style="width:100%">
<tr class="bigtext">
<td>Studenter</td>
<td>17000</td>
</tr>
<tr>
<td>Högskoleingejör</td>
<td>2800</td>
</tr>
<tr>
<td>Ekonomi</td>
<td>1800</td>
</tr>
<tr>
<td>Fristående kurser</td>
<td>8300</td>
</tr>
<tr class="hello">
<td colspan="2">Cirka 600 utländska studenter ingår i det totaala antalet studenter</td>
</tr>
</table>
Preview
This is how I did it. I added the following under the bigtext tr class:
<tr class="underline">
<td class="underline" colspan="2"></td>
</tr>
and I added the following CSS to fix the fonts and the underline:
.underline {
border-top: solid 1px black;
}
tr:not(.bigtext) td:first-child{
font-family: Papyrus, fantasy;
}
tr:not(.bigtext) td:not(first-child){
font-family: Georgia;
}
tr.bigtext td:not(first-child){
font-family: Georgia;
}
The table width has also been adjusted. So the in-line CSS style was removed and this was added to your table css:
width: 70%;
Here is the JSFiddle demo
I have large URL(without spaces) in one of my Table(html table element) cell which resize table. I do not want to resize table, what property should I set to break URL into new line?
HTML
<table class="ui-grid" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
<caption>Statistic (Last 50 conversions)</caption>
<tbody><tr>
<th scope="col">Date</th>
<th scope="col">Result</th>
<th scope="col">Api</th>
<th scope="col">IP</th>
<th scope="col">Source</th>
</tr><tr>
<td style="width:200px;">12/16/2011 3:23:59 PM</td>
<td align="center" style="width:50px;">True</td>
<td align="center" style="width:100px;">Web2Pdf</td>
<td align="center" style="width:100px;">::1</td>
<td style="width:200px;">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.html?i_url=http%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-c&i_name=Patriots%20%20vs%20Redskins&i_venue_name=Gillette%20Stadium%20&i_venue_address=Foxborough%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&p_name_1=Redskins</td>
</tr>
</tbody></table>
CSS
.ui-grid { width: 100%; margin: 5px 0 10px 0; border: solid 1px #eeeeee; border-collapse: collapse; }
.ui-grid td { padding: 2px; border: solid 1px #eeeeee; }
.ui-grid td b { font-weight: bold; }
.ui-grid th { padding: 4px 2px; color: #fff; background: #000000; border-left: solid 1px #eeeeee; text-align: center; }
.ui-grid .alt { background: #fcfcfc; }
.ui-grid .pgr { background: #424242; }
.ui-grid .pgr table { margin: 5px 0; }
.ui-grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.ui-grid .pgr a { color: #666; text-decoration: none; }
.ui-grid .pgr a:hover { color: #000; text-decoration: none; }
Add the following to your css
table-layout:fixed
word-wrap:break-word
The following site has a good walk through of this
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
i modified your code a little and this is what works for me hopefully it will help you
<html>
<div id="wrap">
<div id="content-primary">
<table class="table" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
<caption>
Statistic (Last 50 conversions)
</caption><tbody>
<tr>
<th scope="col">Date</th><th scope="col">Result</th><th scope="col">Api</th><th scope="col">IP</th><th scope="col">Source</th>
</tr>
<tr>
<td style="width:100px">12/16/2011 3:23:59 PM</td><td align="center" style="width:50px;">True</td>
<td style="width:100px">Web2Pdf</td>
<td style="width:100px">::1</td>
<td style="width:100px">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.htmli_url=ht%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&p_name_1=Redskins</td>
</tr>
</tbody></table>
</div>
</div>
</html>
<style type="text/css" media="screen,print,projection">
#import '/css/lab.css';
#wrap {
width:60em;
margin:2em auto;
}
#content-primary {
float:left;
width:60%;
}
#content-secondary {
float:right;
width:36%;
}
table {
width:100%;
border:1px solid #f00;
word-wrap:break-word;
}
th,
td {
vertical-align:top;
text-align:left;
}
</style>
The most practical approach is to add the tag <wbr> after each acceptable break point, such as “/”, “?”, and “&” (maybe also “=”). This tag has been supported by browsers since the early days; it is not included in any HTML specification (though it is proposed to be standardized in HTML5), but it works practically always and has no know drawbacks.
Since this is about a URL in text, the breaks should appear at natural points of division, not arbitrarily. Various style guides (like The Chicago Manual of Style) have their own recommendations, but the simple break point rules mentioned above should be acceptable on all accounts and normally suffice.
There’s some more info on my page on word division in HTML and related matters.
You can try several things:
add the CSS3 property word-wrap: break-word;
You can put a div inside your table cells. Nothing within that div will stretch out the table cell.
max-width css property
Surround the URL in a containing div inside the td. Apply word-wrap:break-word; width:200px to the div container. The div container is for the benefit of IE. In Chrome, for instance, the styles can be applied directly to the td.
word-wrap is non-standard, however, it has excellent browser support, including IE6+.
Here is an example fiddle.
I have a table in html with some tabular data.
The thing is that I have designed a delete and edit visually link outside the table (on the left side of the table), that will only be visible when the user hovers the table row.
How can I add these links without messing up the default table layout?
The current problem is that I need to create a holding the delete and edit link, and this messes up the table structure when they are not visible.
So, is there a way to add a container to a table (needs to follow the table row structure) that is not a td? Or do you know about some examples doing something similar that I could have a look at?
Thanks
It got a little complicated, but there's a demo at JS Bin to demonstrate my approach. I'm not entirely sure that -webkit-border-radius supports the notation that I used (I tested in Chrome which supports border-radius), so it might be worth checking.
Incidentally, because of the approach I took (mainly to avoid having to manually add classes) to what could be a 'clean' design, there are some near-bleeding-edge CSS selectors, such as tbody tr:nth-child(odd) td:first-child. I think all of this but the :nth-child(odd) pseudo-selector should be understood by IE7+ (with a valid doctype), but I don't have an installation of Windows on which to test my assumption. As this particular rule is only there to overrule the specificity of the earlier selector to add zebra-striping, if neither are understood nothing is broken, it's just a slightly less jazzy table is all.
The CSS is below:
body
{
background-color: #39f;
}
thead tr th,
tbody tr td
{
background-color: #fff;
border-collapse: collapse;
color: #000;
height: 2em;
margin: 0;
padding: 0.5em;
vertical-align: center;
width: auto;
}
tbody tr:nth-child(odd) td
{
background-color: #ffa;
}
th
{
font-weight: bold;
}
tr th:first-child,
tr td:first-child,
tbody tr:nth-child(odd) td:first-child
{
background-color: transparent;
border-radius: 1em 0 0 1em;
color: transparent;
moz-border-radius: 1em 0 0 1em;
padding: 0.5em 0 0.5em 0.5em;
webkit-border-radius: 1em 0 0 1em;
}
tr:hover td:first-child,
tbody tr:nth-child(odd):hover td:first-child
{
background-color: #fff;
color: #000;
}
tbody tr:nth-child(odd):hover td:first-child
{
background-color: #ffa;
color: #000;
}
And the html:
<table cellspacing="0">
<thead>
<tr>
<th></th>
<th>visible</th>
<th>visible</th>
<th>visible</th>
<th>visible</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
<tr>
<td>X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
<tr>
<td>X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
</tbody>
</table>
Edited
I've added a side-by-side comparison of the above demonstration and an additional approach, which I think might, in the presence of a valid standards-mode doctype, work reasonably well in older browsers.
The revised demo is here: JS Bin, and can, of course, be edited by clicking on the 'Edit using JS Bin' button.
The relevant CSS can also be seen by hovering over the tables (though it probably works better with larger displays).
Edited
To add in the all finished version, to the best -I think- of my ability, there's two tables (as can be seen at JS Bin (each using slightly different mark-up, and quite different css) to demonstrate at least two ways this can be achieved.
Both tables share this CSS:
body {
background-color: #39f;
}
th {
font-weight: bold;
border-bottom: 2px solid #000;
}
th.title {
border-bottom: 1px solid #000;
}
th.hidden {
border: 0 none transparent;
}
thead tr th,
tbody tr td {
width: auto;
height: 2em;
vertical-align: center;
background-color: #fff;
color: #000;
padding: 0.5em;
margin: 0;
border-collapse: collapse;
}
Next is the 'up-to-date' browsers' CSS:
#preferred thead tr th:first-child {
border: 0 none transparent;
}
#preferred tbody tr:nth-child(odd) td {
background-color: #ffa;
}
#preferred tr th:first-child,
#preferred tr td:first-child,
#preferred tbody tr:nth-child(odd) td:first-child {
color: transparent;
background-color: transparent;
padding: 0.5em 0 0.5em 0.5em;
-webkit-border-top-left-radius: 1em;
-webkit-border-bottom-left-radius: 1em;
-moz-border-radius: 1em 0 0 1em;
border-radius: 1em 0 0 1em;
}
#preferred tr:hover td:first-child,
#preferred tbody tr:nth-child(odd):hover td:first-child {
color: #000;
background-color: #fff;
}
#preferred tbody tr:nth-child(odd):hover td:first-child {
color: #000;
background-color: #ffa;
}
And the relevant html mark-up:
<table cellspacing="0" id="preferred">
<thead>
<tr>
<th></th>
<th class="title" colspan="4">id="preferred"</th>
</tr>
<tr>
<th></th>
<th>visible</th>
<th>visible</th>
<th>visible</th>
<th>visible</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
<tr>
<td>X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
<tr>
<td>X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
</tbody>
</table>
Next is the older browser's CSS:
#ieMaybe {
background-color: #39f;
}
#ieMaybe th,
#ieMaybe td {
background-color: #fff;
}
#ieMaybe th.hidden,
#ieMaybe td.hidden {
color: #39f;
background-color: transparent;
padding: 0.5em 0 0.5em 0.5em;
-webkit-border-top-left-radius: 1em;
-webkit-border-bottom-left-radius: 1em;
-moz-border-radius: 1em 0 0 1em;
border-radius: 1em 0 0 1em;
}
#ieMaybe tr:hover td.hidden,
#ieMaybe tr td.hidden:hover {
color: #000;
background-color: #fff;
}
And the older browsers' html mark-up:
<table cellspacing="0" id="ieMaybe">
<thead>
<tr>
<th class="hidden"></th>
<th class="title" colspan="4">id="ieMaybe"</th>
</tr>
<tr>
<th class="hidden"></th>
<th>visible</th>
<th>visible</th>
<th>visible</th>
<th>visible</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidden">X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
<tr>
<td class="hidden">X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
<tr>
<td class="hidden">X</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
<td>visible</td>
</tr>
</tbody>
</table>
I can't say, for sure, what versions of IE < 8 do in the presence of such chicanery, but IE8 (with a <!DOCTYPE html>) renders it willingly, albeit with no pretence at curved borders. Which is a shame, here's waiting for IE9! =)
As #Yi Jiang noted, in the comments, there were a couple of errors in the first-posted code, those have been left as is (because I'm starting to go CSS-blind), but the code-blocks above have been directly pasted from the latest working JS Bin demo, so unless ctrl+V's been playing up, it should, I hope, be fine.
your could add the links in the first cell and hide them with CSS. position them absolutely and move them to appear as if they are partially outside the table.
you could put all the controls inside a column that has a class "controls" and then play with the css to hide or show... something like this
example
hope this helps