we are showing a centered popup when a user clicks on a logo in a table.
Everything works except ...
logos in the center of the screen(under where the popup is/will be) are not working, and
we need a close button on each the popup.
This is what we have so far:
<style type="text/css">
.main55{
position: fixed;
TOP:50%;
LEFT:50%;
width:400px;
height: 400px;
margin-top:-200px;
margin-left:-200px;
}
.menu0{ clear:both;
}
.menu0 div{
cursor:pointer;
}
#main0 div{
display: none;
}
#main0 div.block{
display: block;
}
</style>
<script>
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("div");
var mli=document.getElementById("main"+m).getElementsByTagName("div");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
<!-----------------------table with LOGOS as menu items------------------------->
<div class="menu0" id="menu0">
<table border=0 bordercolor=red width=900>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,1)">
LOGO1
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,2)">
LOGO2
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,3)">
LOGO3
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,4)">
LOGO4
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,5)">
LOGO5
</div>
</td>
</table>
</div>
<!-----------------DIVS WITH INFO TO POPUP--------------------->
<div class="main55" id="main0">
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO1
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO2
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO3
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO4
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO5
</td>
</table>
</div>
</DIV>
you html is ver complex try this may be this is what you want?
<p>May be you want this? here</p>
<div id="light" class="white_content">This is the popup content. Close</div>
<div id="fade" class="black_overlay"></div>
JS
function showpopup () {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function hidepopup () {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
CSS For Centered ligthbox
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
background-color: white;
z-index:1002;
overflow: auto;
}
n CSS for black overlay for light box effects
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
jsbin
Related
Im trying show a list of data in a table where when the user hovers the icon a small div appears below the icon which gives some links.
The problem that im having is when the image is hovered the hidden div appears but disappears before i try to click on that div. i need that div to hide when i take the mouse out of the div.
And also when i hover the div pushes the content down. How can i keep it in away that it doesnt push the content?
JS
$('.bubble').hide();
$("#bu tr td img").hover(function() {
$(this).nextAll(".bubble").first().show();
}, function(){
$(this).nextAll(".bubble").first().hide();
});
HTML
<table id="bu">
<tr>
<td>Data</td>
<td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data</td>
<td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Input</td>
<td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Test</td>
<td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
</table>
I have created a fiddle over here https://jsfiddle.net/livewirerules/qks2vdpv/2/
Any help will be appreciated
Try this. You don't need JS like everyone else said but I added some additional positioning so the rest of the elements don't shift on hover.
HTML:
<table id="bu">
<tr>
<td>Data</td>
<td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data</td>
<td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Input</td>
<td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Test</td>
<td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
</table>
CSS:
.image {
position: relative;
}
.image:hover .bubble {
display: block;
}
.bubble {
display: none;
z-index: 10;
position: absolute;
top: 40px;
left: -20px;
width: 75px;
height: 80px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}
This can be done without the use of Javascript:
.bubble {
position: relative;
width: 75px;
height: 80px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display:none;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}
td:nth-child(2):hover .bubble {
display:block;
}
<table id="bu">
<tr>
<td>Data</td>
<td>
<img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data</td>
<td>
<img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Input</td>
<td>
<img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Test</td>
<td>
<img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
</table>
You can hide all class .bubble opened before show the right once.
$('.bubble').hide();
$("#bu tr td img").mouseover(function() {
$(".bubble").hide(); // <-- this
$(this).nextAll(".bubble").first().show();
});
You can use display: none on your css and remove your first line.
Here's my code:
<div id="togglemenu2" class="sidetogglemenu">
<table class="hoverTable">
<tbody>
<tr>
<td colspan="2"> Example </td>
</tr>
<tr>
<td colspan="2">
<img class="gpablogo" src="http://s2.postimg.org/yb2yzb5fd/gpab.png">
<div class="gpab1">
<p>1</p>
</div>
<div class="gpab2">
<p>2</p>
</div>
<div class="gpab3">
<p>3</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
How can I move numbers 1,2,3 between G and P and Ab? I need a CSS code to move those numbers look like this:
G1 P2 AB3
Thanks in advance
Here is one way of realizing your layout. Create a wrapping element .logowrap around the image and the labels, and specify position: relative.
You can then use absolute positioning to place the labels where you need them.
.logowrap {
display: inline-block;
border: 1px dotted blue;
position: relative;
}
.logowrap img {
vertical-align: top;
}
.logowrap .gpab {
display: inline-block;
position: absolute;
top: 50%;
font-size: 2.00em;
}
.gpab.n1 {
left: 25%;
}
.gpab.n2 {
left: 50%;
}
.gpab.n3 {
left: 90%;
}
<div id="togglemenu2" class="sidetogglemenu">
<table class="hoverTable">
<tbody>
<tr>
<td>Example</td>
</tr>
<tr>
<td>
<div class="logowrap">
<img class="gpablogo" src="http://s2.postimg.org/yb2yzb5fd/gpab.png">
<div class="gpab n1">1</div>
<div class="gpab n2">2</div>
<div class="gpab n3">3</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I have created one HTML page. I have done it in just french language now I am trying to add an option at the top of my website to translate language between French and English (there are 2 language flags in the link in paragraph below).
My idea is to have a table which contains a button of flag of France and England (French and English) in first row (something like this: http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using HTML and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one displayed at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
See this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have my HTML code below (it doesn't contain code for English table but it is assumed that the table have same HTML code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
After Wrick7 suggestion
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
The output is:
http://prntscr.com/6zdj0r
You can set one table with visibility hidden and another with visible and then when a button is pressed you just change it in js....
function changeDisplay(view1,view2){
//var statev1 = document.getElementById(view1).style.visibility;
//var statev2 = document.getElementById(view2).style.visibility;
//if (statev1 === 'visible'){
document.getElementById(view1).style.visibility = 'hidden';
document.getElementById(view2).style.visibility = 'visible';
/*}else{
document.getElementById(view2).style.visibility = 'hidden';
document.getElementById(view1).style.visibility = 'visible';
}*/
}
.switch6 { max-width: 17em; margin: 0 auto;}
.switch6-light > span,
.switch-toggle > span { color: #000000; }
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label { color: #2b2b2b; }
.switch-toggle a,
.switch6-light span span { display: none; }
.switch6-light { display: block; height: 30px; position: relative; overflow: visible; padding: 0px; margin-left:0px; }
.switch6-light * { box-sizing: border-box; }
.switch6-light a { display: block; transition: all 0.3s ease-out 0s; }
.switch6-light label,
.switch6-light > span { line-height: 30px; vertical-align: middle;}
.switch6-light label {font-weight: 700; margin-bottom: px; max-width: 100%;}
.switch6-light input:focus ~ a,
.switch6-light input:focus + label { outline: 1px dotted rgb(136, 136, 136); }
.switch6-light input { position: absolute; opacity: 0; z-index: 5; }
.switch6-light input:checked ~ a { right: 0%; }
.switch6-light > span { position: absolute; left: -100px; width: 100%; margin: 0px; padding-right: 100px; text-align: left; }
.switch6-light > span span { position: absolute; top: 0px; left: 0px; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
.switch6-light > span span:last-child { left: 50%; }
.switch6-light a { position: absolute; right: 50%; top: 0px; z-index: 4; display: block; width: 50%; height: 100%; padding: 0px; }
<div class="switch6">
<label class="switch6-light">
<input type="checkbox">
<span>
<span onclick="changeDisplay('sign','log');">Log-In</span>
<span onclick="changeDisplay('log','sign');">Sign-In</span>
</span>
<a class="btn btn-primary"></a>
</label>
</div>
I have a HTML table that includes 3 rows.
Each row has a column circle and a column panel (sometimes the panel column is before the circle, sometimes after).
<table>
<tr>
<td>
<div class="circle"></div>
</td>
<td>
<div class="panel-right></div>
</td>
</tr>
<tr>
<td>
<div class="panel-left></div>
</td>
<td>
<div class="circle"></div>
</td>
</tr>
<tr>
<td>
<div class="circle"></div>
</td>
<td>
<div class="panel-right></div>
</td>
</tr>
</table>
When hover panel, panel goes left or right from 10px.
table .panel-left:hover,
table .panel-left:focus {
margin-right: -10px;
margin-left: 10px;
}
table .panel-right:hover,
table .panel-right:focus {
margin-left: -10px;
margin-right: 10px;
}
With javascript, i want to modify the css of circle when hover the panel-left or panel right
$(document).ready(function() {
$(".panel-left").mouseover(function(){
$(".circle").css("border", "5px solid #16a085");
});
$(".panel-left").mouseout(function(){
$(".circle").css("border", "3px solid #cccccc");
});
$(".panel-right").mouseover(function(){
$(".circle").css("border", "5px solid #16a085");
});
$(".panel-right").mouseout(function(){
$(".circle").css("border", "3px solid #cccccc");
});
});
This is working well, except than all the circle are modified, when it should be only the circle inside of the row that contains the panel hovered.
What should be the javascript?
Is this what you want?:
HTML:
<table>
<tr>
<td class="circle-td">
<div class="circle"></div>
</td>
<td>
<div class="panel-right"></div>
</td>
</tr>
<tr>
<td>
<div class="panel-left"></div>
</td>
<td class="circle-td">
<div class="circle"></div>
</td>
</tr>
<tr>
<td class="circle-td">
<div class="circle"></div>
</td>
<td>
<div class="panel-right"></div>
</td>
</tr>
</table>
CSS:
.circle, .panel-right, .panel-left {
background-color:red;
width:200px;
height:200px;
border-radius:100%;
border:3px solid #cccccc;
}
.panel-right, .panel-left {
width:200px;
height:200px;
background-color:green;
}
.panel-left:hover,
.panel-left:focus {
margin-right: -10px;
margin-left: 10px;
}
.panel-right:hover,
.panel-right:focus {
margin-left: -10px;
margin-right: 10px;
}
Javascript
$(document).ready(function() {
$('.panel-left, .panel-right').mouseover(function() {
$(this).closest('td')
.siblings('.circle-td')
.find('.circle')
.css('border', '5px solid #16a085');
}).mouseout(function() {
$(this).closest('td')
.siblings('.circle-td')
.find('.circle')
.css('border', '5px solid #cccccc')
});
});
And here is the fiddle
inside td I am taking a table, but somehow table is not taking the td full height. can any one help me to fix this issue.
html for table:
<table style="height: auto">
<tr>
<td style="background-color: red">
<table style="background-color: orange">
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>
You can't force an object to take up 100% of the height of a cell without writing some JavaScript that will figure out the height of the cell and resize the table programatically.
I'm not really sure what your goal is with this, but you can achieve the look you seem to want by setting the background on the td and set a border to get the red outline.
<table style="height: auto">
<tr>
<td style="background-color: orange; border: solid red 1px">
<table>
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>