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>
Related
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.table-container {
padding: 0 10%;
background-color: #14131f;
width: 100%;
height: 100%;
}
.table-heading {
font-size: 40px;
text-align: center;
color: #CCC;
line-height: 150px
}
.table-turniere {
width: 100%;
border-collapse: collapse;
}
.table-turniere thead {
background-color: #14131f;
}
.table-turniere thead tr th {
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #CCC;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #63FFA5;
}
.table-turniere tbody tr td {
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #CCC;
background-color: #25233b;
padding: 8px;
text-align: center;
border: 1px solid #CCC;
}
.table-turniere tbody tr td .einbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #14131f;
font-weight: medium;
color: #CCC;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #63FFA5;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #63FFA5;
font-weight: medium;
color: #14131f;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #14131f;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
#media (max-width: 768px){
.table-turniere thead {
display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
display: block;
width: 100%;
}
.table-turniere tr {
margin-bottom: 15px;
}
.table-turniere tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table-turniere td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
{% load static %}
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href={% static "css/fencingstyles.css" %}>
<link rel="stylesheet" href={% static "css/styles.css" %}>
<link rel="stylesheet" href={% static "css/loader.css" %}>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% include "partials/_preloader.html" %}
<nav class="navbar">
<div class="navbar__container">
<i class="fa-solid fa-dna"></i>
<!-- <div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<ul class="navbar__menu">
<li class="navbar__item">
FENCING
</li>
</ul>
</div> -->
<ul class="navbar__menu">
<li class="navbar__item">
<!-- HOME -->
</li>
<li class="navbar__item">
<!-- TECH -->
</li>
<li class="navbar__item">
<!-- PRODUCTS -->
</li>
<li class="navbar__btn">
<!-- SIGN UP -->
</li>
</ul></div></nav>
<div class="table-container">
<h1 class="table-heading">Turniere</h1>
<table class="table-turniere">
<thead>
<tr>
<th>Name</th>
<th>Datum</th>
<th>Ort</th>
<th>Kategorie</th>
<th>Einladung</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">kleeblatt</td>
<td data-label="Datum">2.64.234</td>
<td data-label="Ort">foil</td>
<td data-label="Kategorie">u21</td>
<td data-label="Einladung">PDF</td>
<td data-label="Details">Details</td>
</tr>
<tr>
<td data-label="Name">dead</td>
<td data-label="Datum">wd34</td>
<td data-label="Ort">fwadwdl</td>
<td data-label="Kategorie">wwwwwww1</td>
<td data-label="Einladung">PDF</td>
<td data-label="Details">Details</td>
</tr>
</tbody>
</table>
</div>
{% include "partials/_footer.html" %}
<script src="{% static 'js/loader.js' %}"></script>
</body>
</html>
hey guys i need some help with this:
when using iphone 12 dimensions in google dev tools i get my table coordinated right but when i open my page through my phone i gets really buggy,
(iphone 12)
in google dev tools with iphone 12 resolution settings (as it should be)
on my iphone 12 (buggy)
i want the tables to render out right so as in google dev tools, on my iphone and this is the source code:
html code:
{% load static %}
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href={% static "css/fencingstyles.css" %}>
<link rel="stylesheet" href={% static "css/styles.css" %}>
<link rel="stylesheet" href={% static "css/loader.css" %}>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% include "partials/_preloader.html" %}
<nav class="navbar">
<div class="navbar__container">
<i class="fa-solid fa-dna"></i>
<!-- <div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<ul class="navbar__menu">
<li class="navbar__item">
FENCING
</li>
</ul>
</div> -->
<ul class="navbar__menu">
<li class="navbar__item">
<!-- HOME -->
</li>
<li class="navbar__item">
<!-- TECH -->
</li>
<li class="navbar__item">
<!-- PRODUCTS -->
</li>
<li class="navbar__btn">
<!-- SIGN UP -->
</li>
</ul></div></nav>
<div class="table-container">
<h1 class="table-heading">Turniere</h1>
<table class="table-turniere">
<thead>
<tr>
<th>Name</th>
<th>Datum</th>
<th>Ort</th>
<th>Kategorie</th>
<th>Einladung</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">kleeblatt</td>
<td data-label="Datum">2.64.234</td>
<td data-label="Ort">foil</td>
<td data-label="Kategorie">u21</td>
<td data-label="Einladung">PDF</td>
<td data-label="Details">Details</td>
</tr>
<tr>
<td data-label="Name">dead</td>
<td data-label="Datum">wd34</td>
<td data-label="Ort">fwadwdl</td>
<td data-label="Kategorie">wwwwwww1</td>
<td data-label="Einladung">PDF</td>
<td data-label="Details">Details</td>
</tr>
</tbody>
</table>
</div>
{% include "partials/_footer.html" %}
<script src="{% static 'js/loader.js' %}"></script>
</body>
</html>
css code:
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.table-container {
padding: 0 10%;
background-color: #14131f;
width: 100%;
height: 100%;
}
.table-heading {
font-size: 40px;
text-align: center;
color: #CCC;
line-height: 150px
}
.table-turniere {
width: 100%;
border-collapse: collapse;
}
.table-turniere thead {
background-color: #14131f;
}
.table-turniere thead tr th {
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #CCC;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #63FFA5;
}
.table-turniere tbody tr td {
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #CCC;
background-color: #25233b;
padding: 8px;
text-align: center;
border: 1px solid #CCC;
}
.table-turniere tbody tr td .einbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #14131f;
font-weight: medium;
color: #CCC;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #63FFA5;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #63FFA5;
font-weight: medium;
color: #14131f;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #14131f;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
#media (max-width: 768px){
.table-turniere thead {
display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
display: block;
width: 100%;
}
.table-turniere tr {
margin-bottom: 15px;
}
.table-turniere tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table-turniere td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.table-container {
padding: 0 10%;
background-color: #14131f;
width: 100%;
height: 100%;
}
.table-heading {
font-size: 40px;
text-align: center;
color: #CCC;
line-height: 150px
}
.table-turniere {
width: 100%;
border-collapse: collapse;
}
.table-turniere thead {
background-color: #14131f;
}
.table-turniere thead tr th {
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #CCC;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #63FFA5;
}
.table-turniere tbody tr td {
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #CCC;
background-color: #25233b;
padding: 8px;
text-align: center;
border: 1px solid #CCC;
}
.table-turniere tbody tr td .einbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #14131f;
font-weight: medium;
color: #CCC;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #63FFA5;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
width: 130px;
text-decoration: none;
line-height: 35px;
display: inline-block;
background-color: #63FFA5;
font-weight: medium;
color: #14131f;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid #14131f;
font-size: 14px;
opacity: 1;
border-radius: 7px;
}
#media (max-width: 768px){
.table-turniere thead {
display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
display: block;
width: 100%;
}
.table-turniere tr {
margin-bottom: 15px;
}
.table-turniere tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table-turniere td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
{% load static %} <html lang="en"> <head> <script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script> <link rel="stylesheet" href={% static "css/fencingstyles.css" %}> <link rel="stylesheet" href={% static "css/styles.css" %}> <link rel="stylesheet" href={% static "css/loader.css" %}> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> {% include "partials/_preloader.html" %} <nav class="navbar"> <div class="navbar__container"> <i class="fa-solid fa-dna"></i> <!-- <div class="navbar__toggle" id="mobile-menu"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> <ul class="navbar__menu"> <li class="navbar__item"> FENCING </li> </ul> </div> --> <ul class="navbar__menu"> <li class="navbar__item"> <!-- HOME --> </li> <li class="navbar__item"> <!-- TECH --> </li> <li class="navbar__item"> <!-- PRODUCTS --> </li> <li class="navbar__btn"> <!-- SIGN UP --> </li> </ul></div></nav> <div class="table-container"> <h1 class="table-heading">Turniere</h1> <table class="table-turniere"> <thead> <tr> <th>Name</th> <th>Datum</th> <th>Ort</th> <th>Kategorie</th> <th>Einladung</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td data-label="Name">kleeblatt</td> <td data-label="Datum">2.64.234</td> <td data-label="Ort">foil</td> <td data-label="Kategorie">u21</td> <td data-label="Einladung">PDF</td> <td data-label="Details">Details</td> </tr> <tr> <td data-label="Name">dead</td> <td data-label="Datum">wd34</td> <td data-label="Ort">fwadwdl</td> <td data-label="Kategorie">wwwwwww1</td> <td data-label="Einladung">PDF</td> <td data-label="Details">Details</td> </tr> </tbody> </table> </div> {% include "partials/_footer.html" %} <script src="{% static 'js/loader.js' %}"></script> </body> </html>
What fixed the problem for me was:
Changing display:block —-> to display:grid
Now it works on every device
like so:
#media (max-width: 768px){
.table-turniere thead {
display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
display: grid;
width: 100%;
}
}
I would like to make a border/frame under the text as same as the photo below
table.blueTable {
background-color: #5F80A8;
height: 200px;
width: 50%;
margin: auto;
position: relative;
bottom: -165px;
color: white;
}
table.blueTable td {
font-size: 1.3em;
}
#uno,
#tre,
{
text-align: center;
line-height: 4em;
}
#due,
#quattro,
{
text-align: left;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>table6</title>
<table class="blueTable">
<tbody>
<tr>
<td id="uno">初期費用</td>
<td id="due">15万～30万<br>（選択プランによる</td>
</tr>
<tr>
<td id="tre">月額費用</td>
<td id="quattro">5万～15万<br>（選択プランによる）<br>＋SMS送信料 12円/通<br>＋IVR利用料 8円/60秒</td>
</tr>
</tbody>
</tr>
</table>
</body>
</html>
You can add css for table border as below:
td, th {
border: solid 1px;
border-left: none;
border-top: none;
}
Here is your updated code:
table.blueTable {
background-color: #5F80A8;
height: 200px;
width: 50%;
margin: auto;
position: relative;
bottom: -165px;
color: white;
}
td, th {
border: solid 1px;
border-left: none;
border-top: none;
}
table.blueTable td {
font-size: 1.3em;
border-bottom: 1px solid #fff;
}
#uno,
#tre,
{
text-align: center;
line-height: 4em;
}
#due,
#quattro,
{
text-align: left;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>table6</title>
<table class="blueTable">
<tbody>
<tr>
<td id="uno">初期費用</td>
<td id="due">15万～30万<br>（選択プランによる</td>
</tr>
<tr>
<td id="tre">月額費用</td>
<td id="quattro">5万～15万<br>（選択プランによる）<br>＋SMS送信料 12円/通<br>＋IVR利用料 8円/60秒</td>
</tr>
</tbody>
</tr>
</table>
</body>
</html>
Hope this helps !
Can you add cellspacing to your table tag. Hope this will solve the issue.
<table class="blueTable" cellspacing="30">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
table.blueTable td {
font-size: 1.3em;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
I added bootstrap to my page to solve a different problem, then I noticed that my table cells in another place had all collapsed:
How do I get the cells to auto size to their contents? I've seen posts about changing the width of cells, but I need to change their height back to their pre-bootstrap settings.
Here is my code:
.countdown_table {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.countdown_table tr td {
font-family: 'proxima-nova', sans-serif;
padding-right: 20px;
color: white;
text-align: center;
}
.units {
font-weight: 100;
text-transform: uppercase;
text-align: center;
}
.numbers {
font-size: 700%;
font-weight: 100;
letter-spacing: 0;
text-align: center;
background: #e18b35 !important;
font-family: 'proxima-nova', sans-serif;
color: white;
}
#secondElem {
width: 97px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="countdown_table" border="1">
<tr>
<td class="numbers" id="dayElem">04</td>
<td class="numbers">:</td>
<td class="numbers" id="hourElem">02</td>
<td class="numbers">:</td>
<td class="numbers" id="minuteElem">47</td>
<td class="numbers">:</td>
<td class="numbers" id="secondElem">04</td>
</tr>
<tr class="units">
<td>days</td>
<td></td>
<td>hours</td>
<td></td>
<td>minutes</td>
<td></td>
<td>seconds</td>
</tr>
</table>
A table I create in HTML for use in an Outlook email signature seems to show strange problems, adding extra spacing.
Here is how it looks in Outlook:
Here is how it looks in Chrome:
The code is as below:
<html>
<head>
<title>JohnDoe</title>
<style>
p {
align:justify;
}
#contentTable{
padding-top: 25px;
padding-right: 35px;
padding-bottom: 25px;
padding-left: 35px;
width: 480px;
height: 105px;
}
#logo{
height: 210px;
width: 228px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
padding: 0;
display: block;
border-collapse:collapse;
}
.table{
border-collapse:collapse;
}
#nameRow{
height: 18px;
}
#nameField{
font-size: 24;
font-family: "Helvetica";
color: #73A84D;
font-weight: bold;
width: 100%;
}
#dirRow{
height: 14px;
}
#dirField{
font-size: 18;
font-family: "Helvetica";
color: #606062;
}
.descRow{
}
.descField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #96989A;
}
.valueField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #606062;
text-align: justify;
}
</style>
<body>
<table id="contentTable">
<tr>
<td>
<img src="http://s14.postimg.org/eo35t2l4t/logo.jpg" />
</td>
<td>
<table id="infoTable">
<tr id="nameRow">
<td id="nameField">JOHN DOE</td>
</tr>
<tr id="dirRow">
<td id="dirField">
Attorney
</td>
</tr>
<tr>
<table>
<tr>
<td>
<p id="descFieldPara" class="descField">
PHONE:<br>
EMAIL:<br>
<br>
URL:
</p>
</td>
<td id="valueFieldPara" class="valueField">
<p>+ 12 3456 789 012<br>JOHN.D#BLAHBLAH.COM.US<br>ATTORNEY#BLAHBLAHJOHNDOE.COM.US<br>WWW.BLAHBLAHJOHNDOE.COM.US
</p>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</body>
</head>
</html>
Can someone tell me what is the reason for this discrepancy?
<!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>