<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
.table {
border-collapse: collapse;
border-spacing: 0;
}
.table td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 20px;
border-style: solid;
border-width: 2px;
}
.table th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 20px;
border-style: solid;
border-width: 2px;
}
.table .tg-1 {
text-align: center;
}
.table .tg-2 {
font-weight: bold;
background-color: #c0c0c0;
text-align: center;
}
</style>
<table class="table">
<tr>
<th class="tg-2">Animal Name</th>
<th class="tg-2">Picture</th>
</tr>
<tr>
<td class="tg-1">Cat</td>
<td rowspan="3"></td>
</tr>
<td class="tg-1">Dog</td>
</tr>
<tr>
<td class="tg-1">Horse</td>
</tr>
</table>
</body>
</html>
<br>
I have created the above table with hyperlinks, the hyperlinks are opening in the same window/tab however I would like to open them in the blank column of my table.
Can you please offer some help?
How do I set the target of the hyperlink to the second column of the table?
Using just HTML (and CSS) without client-side scripting, you would need to put an iframe element into the second column and make the links open in that iframe. (With scripting, you could alternatively just change the src attribute of an img element placed in the second column.)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
.table {
border-collapse: collapse;
border-spacing: 0;
}
.table td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 20px;
border-style: solid;
border-width: 2px;
}
.table th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 20px;
border-style: solid;
border-width: 2px;
}
.table .tg-1 {
text-align: center;
}
.table .tg-2 {
font-weight: bold;
background-color: #c0c0c0;
text-align: center;
}
.table iframe {
padding: 0;
width: 216px; /* modify as needed according to image size */
height: 116px; /* use +16px in both to allow for internal padding */
border: none;
}
</style>
<table class="table">
<tr>
<th class="tg-2">Animal Name</th>
<th class="tg-2">Picture</th>
</tr>
<tr>
<td class="tg-1">Cat</td>
<td rowspan="3"><iframe src="about:blank" name="pic"></iframe></td>
</tr>
<td class="tg-1">Dog</td>
</tr>
<tr>
<td class="tg-1">Horse</td>
</tr>
</table>
</body>
</html>
I think that what you really need it for the hyperlinks to be replaced with image tags, e.g.:
<td class="tg-1"><image src="Images/Horse.jpg" alt="Horse"/></td>
Related
I'm trying to learn some HTML & CSS skills and I facing an issue that I couldn't find any proper solution online.
I'm trying to add some border-spacing to both sides to my designed table. please see the attached images for better understanding
Current table:
https://imgur.com/6eKSfVC
Desired table:
https://imgur.com/Vvafhlg
My code:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
<style>
table {
text-align: center;
font-size: 10pt;
height: 22px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
bgcolor="#ffffff";
font-family: calibri;
color: #707070;
width: 50%;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
<br><br><br>
</body>
Would you guys help me a proper solution?
Thanks!
Hope this solves your problem
Add your table in a div then apply padding and box-shadow to the box (div).
table {
text-align: center;
font-size: 10pt;
height: 22px;
width:100%;
font-family: calibri;
color: #707070;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
.table-box {
padding:20px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
</head>
<body>
<div class="table-box">
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
</div>
</body>
</html>
Here is your solution, try with this way it will helps you.
.main-card {
padding: 10px 30px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
width: 50%;
border-radius: 10px;
}
table {
width: 100%;
text-align: center;
font-size: 10pt;
height: 22px;
background-color: #ffffff;
font-family: calibri;
color: #707070;
border-collapse: collapse;
}
th,
td {
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
</head>
<body>
<div class="main-card">
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
</div>
</body>
.table-wrapper {
display: flex;
width: 50vw;
max-width: 300px;
}
.table-theme {
padding: 0.5em 2em;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
font-size: 12px;
}
.table-theme caption {
font-size: 1.5em;
font-weight: bold;
margin: 0.5em;
}
.table-theme > table {
text-align: center;
font-size: 10pt;
height: 22px;
background-color: "#ffffff";
font-family: Calibri;
color: #707070;
border-collapse: collapse;
width: 100%;
}
.table-theme tbody tr {
padding: 0 75em;
border: solid #1AAE9F;
border-width: 1px 0;
}
.table-theme tbody tr:last-child {
border-bottom: none;
}
.table-theme thead th {
padding: 0.25em 0;
}
.table-theme tbody td {
padding: 0.75em 0;
}
/* example */
.table-theme td[data-th="Symbol"] {
font-size: 1.1em;
}
.table-theme th[title="Return"],
.table-theme td[data-th="Return"] {
color: green;
font-weight: bold;
}
<div class="table-theme table-wrapper">
<table>
<caption>Februari biggest gainers</caption>
<thead>
<tr>
<th title="Symbol">Symbol</th>
<th title="Position">Position</th>
<th title="Return">Return</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
</tbody>
</table>
</div>
I made a table in html but when I try to increase the height of a table cell it doesn't increase.
this is the index.html file:
<!DOCTYPE html>
<!--Begin-->
<html>
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Cards</h1>
<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Card</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Charizard</td>
<!--<td><img src="https://52f4e29a8321344e30ae-0f55c9129972ac85d6b1f4e703468e6b.ssl.cf2.rackcdn.com/products/pictures/1105091.jpg">Charizard card</img></td>-->
</tr>
</table>
</body>
</html>
and here is the style.css file:
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}
This is how that looks:
But that isnt what I wanted because in the code I put rowspan="2" so here is an example of what I expected
But why is it that the first image is the result of this code and not the second?
You don't have a third row in your HTML code, that's why that cell doesn't span into a third row. As soon as you add a third row, the rowspan will look as expected:
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}
<html>
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Cards</h1>
<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Card</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Charizard</td>
<!--<td><img src="https://52f4e29a8321344e30ae-0f55c9129972ac85d6b1f4e703468e6b.ssl.cf2.rackcdn.com/products/pictures/1105091.jpg">Charizard card</img></td>-->
</tr>
<tr>
<td>Row 3, second cell</td>
</tr>
</table>
</body>
</html>
With the following table I have some problems. First, what's wrong with the html? I'm getting errors flagged. But the main problem is, that the leftcolumn is not getting a complete border and I cannot figure out why.
JSFiddle here
<!DOCTYPE html>
<html>
<head>
<title> Auflistung 2014</title>
<style type="text/css">
* html body {
margin: 0;
padding: 0;
border: 0;
}
body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "Lucida Console", sans-serif;
font-size: 66%;
}
table {
border-spacing: 0;
border-collapse: collapse;
border: 0;
width: 650px;
}
td {
white-space: nowrap;
text-align: right;
border-collapse: collapse;
border: 1px solid #000;
}
th {
font-family: Helvetica;
font-size: 120%;
}
body {
margin: 10px;
}
.linkespalte {
text-align: center;
width: 80px;
font-size: 100%;
border-collapse: collapse;
border: 1px solid #000;
}
.lfd {
width: 3em;
}
.bet {
width: 6em;
}
.vorst {
width: 6em;
}
.date {
width: 6em;
}
.mwst {
width: 4em;
}
</style>
</head>
<body>
<br/>
<br/>
<table>
<tr>
<th colspan="7"> Ueberschrift I </th>
</tr>
<tr>
<td colspan="3">Summe Netto: 0.00</td>
<td colspan="4">Summe Vorsteuer 7%: 0.00 Summe Vorsteuer 19%: 0.00</td>
</tr>
</table>
<br/>
<br/>
<table>
<tr>
<th colspan="7">Ueberschrift II</th>
</tr>
<tr>
<td class="linkespalte" rowspan="250"><em>480</em></td>
<td class="lfd"> 1</td>
<td class="date"> 18.12.</td>
<td width="120">Fa XY</td>
<td width="120">iPad AIR 16GB</td>
<td width="10" class="bet"> 369.00</td>
<td class="mwst"> 19</td>
<td class="vorst"> 58.92</td>
</tr>
<tr>
<td colspan="3">Summe Netto: 310.08</td>
<td colspan="4">Summe Vorsteuer 7%: 0.00 Summe Vorsteuer 19%: 58.92</td>
</tr>
</table>
</body>
</html>
Your code is as below :
<td class="linkespalte" rowspan="250" ><em>480</em></td>
But, it should be as below :
<td class="linkespalte" rowspan="2" ><em>480</em></td>
I'm trying to figure out how to emulate this image using HTML and CSS. It will be something that will be displayed below the avatar on a message board.
This is what I have so far: https://jsfiddle.net/J7VBV/220/
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple">RECENT WR<br /><strong>61%</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple">RECENT WN8<br /><strong>2469</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>1737</strong></td>
</tr>
</table>
The main problem I'm having is decreasing the size of the text above the numbers. Nothing I've tried is making the text smaller.
Also, is there a better way of bolding the numbers?
Use this
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
td small{
font-size:7pt;
font-weight:bold;
}
td strong{
font-size:18pt;
font-weight:bold;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><small>RECENT WR</small><br /><strong>61%</strong></td>
<td bgcolor="teal"><small>OVERALL</small><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><small>RECENT WN8</small><br /><strong>2469</strong></td>
<td bgcolor="teal"><dev font-size: 10pt;><small>OVERALL</small><br /><strong>1737</strong></td>
</tr>
</table>
You can use CSS to make the font smaller.
font-size: 10pt;
Just replace 10pt with whatever size you want to use.
I would use a CSS class like:
.small {
font-size: 10pt;
}
and add
class="small"
to the text you want to be small
You can do like this.
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.cap{
font-size:8px;
font-weight:normal;
}
td{
font-weight:bold;
font-size:22px
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><span class="cap">RECENT WR</span><br /><strong>61%</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><span class="cap">RECENT WN8</span><br /><strong>2469</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>1737</strong></td>
</tr>
</table>
Adjust the font-size accordingly as needed
try this https://jsfiddle.net/fd9x06jq/
table.avatarStats tr td strong{
font-size:9pt;
font-weight:bold;
color:black
}
Although I'd advise some changes to your markup, add this to you CSS:
table tr td:last-child{
font-size: 8pt;
}
EDIT:
My first code was off. Now it's correct. Here's a fiddle
Updated your code here: https://jsfiddle.net/70gtky65/1/
<table class="avatarStats">
<tr>
<td>RECENT WR<br/><span>61%</span></td>
<td>OVERALL<br/><span>55%</span></td>
</tr>
<tr>
<td>RECENT WN8<br/><span>2469</span></td>
<td>OVERALL<br/><span>1737</span></td>
</tr>
</table>
<style type="text/css">
table.avatarStats {
border-spacing: 0px;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
width: 108px;
}
table.avatarStats td {
font-size: 7px;
width: 50px;
padding: 2px;
}
table.avatarStats td span {
font-size: 16px;
}
table tr td:first-child {
background-color: #7842B3;
}
table tr td:last-child {
background-color: #459ABD;
}
</style>
You should try to avoid inline CSS and here is why
I am a bit new to CSS and am stuck with this small problem. I want the background color of a table row to change when I hover over that row. I have written the code below but somehow only the hovering part does not seem to work. I have tried viewing in Google Chrome v24 and Firefox v18. Could anyone say where am I going wrong.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
table.contacts
{
width: 580px;
background-color: #fafafa;
border: 1px #000000 solid;
border-collapse: collapse;
border-spacing: 0px;
}
.contacts th
{
background-color: #99CCCC;
font-family: Verdana;
text-align: left;
border-bottom:1px #000000 solid;
font-weight: bold;
font-size: 12px;
padding:4px;
margin:4px;
color: #404040;
}
.contacts td
{
border-bottom: 1px #6699CC dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: .7em;
color: #404040;
background-color: #fafafa;
padding:4px;
margin:4px;
}
table tr:hover
{
background-color:blue;
}
</style>
</head>
<body>
<table class="contacts" cellspacing="2">
<tr>
<th>Subscription Scheme</th>
<th>Amount</th>
</tr>
<tr>
<td>Monthly Subscription(Family)</td>
<td>Rs 200</td>
</tr>
<tr>
<td>Monthly Subscription(Individuals)</td>
<td>Rs 100</td>
</tr>
<tr>
<td>Monthly Subscription(Company)</td>
<td>Rs 500</td>
</tr>
<tr>
<td>Yearly Subscription(Family)</td>
<td>Rs 2000</td>
</tr>
<tr>
<td>Yearly Subscription(Company)</td>
<td>Rs 5000</td>
</tr>
<tr>
<td>Festival Subscription</td>
<td>Rs 1000</td>
</tr>
</table>
</body>
</html>
It is working, you're just not seeing it work because the td element's background-color is hiding the background-color of the tr element. Instead use:
tr:hover td {
background-color: blue;
}