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
Related
I'm learning about HTML tables. I've got this example:
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px 20px;
}
th {
background-color: rgb(235, 235, 235);
}
td {
text-align: center;
}
tr:nth-child(even) td {
background-color: rgb(250, 250, 250);
}
tr:nth-child(odd) td {
background-color: rgb(245, 245, 245);
}
caption {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animals table</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Animals table</h1>
<table>
<tr>
<th colspan="2">Animals</th>
</tr>
<tr>
<th colspan="2">Hippopotamus</th>
</tr>
<tr>
<th rowspan="2">Horse</th>
<td>Mare</td>
</tr>
<tr>
<td>Stallion</td>
</tr>
<tr>
<th colspan="2">Crocodile</th>
</tr>
<tr>
<th rowspan="2">Chicken</th>
<td>Hen</td>
</tr>
<tr>
<td>Rooster</td>
</tr>
</table>
</body>
</html>
I don't understand why are table header (Horse) and data (Mare) placed in the same row, and then another data (Stallion) is placed in another row, e.g.
<tr>
<th rowspan="2">Horse</th>
<td>Mare</td>
</tr>
<tr>
<td>Stallion</td>
</tr>
When I move the first data tag (Mare) to second row, I get three-column row.
So, what's the intuition behind constructing the table like this? Couldn't it be done some other way?
How did you want the output to look like?
You might want to read up on how rowspans and colspans work in html. This website explains very well how to create table layouts, like the one in your example.
<th rowspan="2">Horse</th> -> This would mean that Horse takes up 2 blocks downwards. So the next 2 table data (td or th) that you enter would go to the right of that.In this case after Horse you've written Mare and Stallion.
For example if you had a rowspan of 3 it would come out in this way V
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px 20px;
}
<table>
<tr>
<th rowspan="3">Horse</th>
<td>Mare</td>
</tr>
<tr>
<td>Stallion</td>
</tr>
<tr>
<td>Colt</td>
</tr>
</table>
Colspan on the other hand takes up blocks along the row. For the example on your table you can have a colspan of maximum 2 since your table only has 2 columns.Like in the line
<tr><th colspan="2">Crocodile</th></tr>
And nothing else will be added to that row.
I really hope this has answered your question and made it more clear.
I'm using Powershell ConvertTo-HTML to build a three column table. I want to display a header image in the first row that spans all three columns. The table looks great but the image in the first row is like 1px thick.
I've tried resizing the columns, the image, only using 1 column instead of spanning...
Here's the generate code from the Powershell script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
table {
border-collapse: collapse;
width: 700px;
}
td, th {
border: 1px solid #ddd;
font-family: Arial;
font-size: 14px;
padding: 8px;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4286f4;
color: white;
}
</style>
</head><body>
<table>
<tr>
<td colspan='3' >
<img src='file:///\\fileserver\files\file1.jpg'/>
</td>
</tr>
<tr>
<td style='width:10%'></td>
<td>Test</td>
<td style='width:10%'></td>
</tr>
</table>
<table>
</table>
</body></html>
Thanks for any help.
Jeff
I finally figured it out. The image was around 2,500px and way to large so was getting compressed into the space.
Thanks everyone for you suggestions.
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'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;}
The snippet below actually produces a table similar to what I want when it runs here, but the output RTF file shows a different table without the inside borders. How could this be?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="Generator" content="SAS Software Version 9.3, see www.sas.com">
<meta http-equiv="Content-type" content="text/html; charset=windows-1252">
<title>SAS Output</title>
<style type="text/css">
<!--
.table {
color: #000000;
font-family: 'Arial', 'Arial';
font-size: 10pt;
font-style: normal;
font-weight: normal;
border: medium double black;
}
.proctitle{
color: #000000;
font-family: Arial, 'Albany AMT', Arial;
font-size: x-small;
font-style: normal;
font-weight: bold;
}
.systemtitle{
font-family: Arial, 'Albany AMT', Arial;
font-size: large;
font-weight: 14pt;
color: black;
}
.header, .rowheader, .footer, .rowfooter{
color: black;
font-size: 10pt;
font-family: Arial, 'Albany AMT', Arial;
background-color: #ffffff;
font-weight: bold;
text-align: center;
vertical-align: middle;
padding: 10px;
}
.data{
font-size: 10pt;
font-family: Arial, 'Albany AMT', Arial;
background-color: #ffffff;
text-align: center;
vertical-align: middle;
padding: 10px;
}
.l {text-align: left }
.c {text-align: center }
.r {text-align: right }
.d {text-align: right }
.j {text-align: justify }
.t {vertical-align: top }
.m {vertical-align: middle }
.b {vertical-align: bottom }
TD, TH {vertical-align: top }
.stacked_cell{padding: 0 }
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function startup(){
}
function shutdown(){
}
//-->
</script>
</head>
<body onload="startup()" onunload="shutdown()" class="body">
<script language="javascript" type="text/javascript">
<!--
var _info = navigator.userAgent
var _ie = (_info.indexOf("MSIE") > 0
&& _info.indexOf("Win") > 0
&& _info.indexOf("Windows 3.1") < 0);
var _ie64 = _info.indexOf("x64") > 0
//-->
</script>
<div class="branch">
<a name="IDX"></a>
<table class="systitleandfootercontainer" width="100%" cellspacing="1" cellpadding="1" rules="none" frame="void" border="0" summary="Page Layout">
<tr>
<td class="c systemtitle">Example Title Here</td>
</tr>
</table><br>
<div>
<div align="center">
<table class="table" cellspacing="0" cellpadding="5" rules="all" frame="box" bordercolor="#C1C1C1" summary="Procedure Print: Data Set WORK.TEST">
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="l header" scope="col">CAR</th>
<th class="r header" scope="col">YEAR</th>
</tr>
</thead>
<tbody>
<tr>
<td class="l data">FORD</td>
<td class="r data">1995</td>
</tr>
<tr>
<td class="l data">HONDA</td>
<td class="r data">1998</td>
</tr>
<tr>
<td class="l data">CHEVY</td>
<td class="r data">2001</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
However, this produces a table as such:
I'd like for it to look like:
I created the following dataset and used ODS RTF and my custom .css file (in this example, called TESTFOX) to output the table:
DATA TEST;
INPUT CAR $10. YEAR;
DATALINES;
FORD 1995
HONDA 1998
CHEVY 2001
;
RUN;
ODS RTF FILE="C:\USERS\DOCUMENTS\TEST.RTF" CSSSTYLE='C:\USERS\DOCUMENTS\TESTFOX.CSS';
PROC PRINT DATA=TEST NOOBS;
RUN;
ODS _ALL_ CLOSE;
Use the nth child selector. Css below may work depending on your html structure.
tr:first-child {
border-top: medium double black;
}
tr:first-child {
border-bottom: medium double black;
}
td:first-child {
border-left: medium double black;
}
td:last-child {
border-right: medium double black;
}
EDIT
After the original poster added some details, here is a possible way to get the inner border.
td, th {
border: thin solid black;
}