JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css">
<!-- START agenda table --> <table id="agenda" cellspacing="0px" cellpadding="0px" border="0px"> <thead> <tr> <!-- bovenbalk --> <td></td> <td><img height="50px" width="120px" src="days/monday.png" alt="Monday"></td> <td><img height="50px" width="120px" src="days/tuesday.png" alt="Tuesday"></td> <td><img height="50px" width="120px" src="days/wednesday.png" alt="Wednesday"></td> <td><img height="50px" width="120px" src="days/thursday.png" alt="Thursday"></td> <td><img height="50px" width="120px" src="days/friday.png" alt="Friday"></td> </tr> </thead> <!-- linkerbalk en inhoud --> <tbody> <tr><td><img height="50px" width="38px" src="times/9.png" alt="9.00"></td><td><img height="50px" width="120px" alt="Cycling to Zernike" src="activities/cycling.png"></td><td><a href="javascript:;" name="11" title="Use Excellent Study Facilities"><img height="50px" width="120px" src="activities/facilities_a.png" alt="Use Excellent Study Facilities"></a></td><td><a href="javascript:;" name="7" title="Sport at ACLO"><img height="50px" width="120px" src="activities/sport_a.png" alt="Sport at ACLO"></a></td><td><a href="javascript:;" name="11" title="Use Excellent Study Facilities"><img height="50px" width="120px" src="activities/facilities2_a.png" alt="Use Excellent Study Facilities"></a></td><td><a href="javascript:;" name="14" title="Analyze a Case Together"><img height="50px" width="120px" src="activities/case_a.png" alt="Analyze a Case Together"></a></td><tr><td><img height="50px" width="38px" src="times/10.png" alt="10.00"></td><td><a href="javascript:;" name="2" title="Watch a Lecture"><img height="50px" width="120px" src="activities/lecture_a.png" alt="Watch a Lecture"></a></td><td><a href="javascript:;" name="11" title="Use Excellent Study Facilities"><img height="50px" width="120px" src="activities/facilities_b.png" alt="Use Excellent Study...

CSS

table {
    cellpadding:0px !important; 
    cellspacing:0px !important;
    border:0px !important;
    font-size:0px !important;
}
p {
text-align: justify;
}

div.video{
 width: 480px;
 height: 400px;
 margin: 0 auto;
}

JavaScript

function ViewDialog(name, title) { $("#dialog").load('dialog.php?id=' + name).dialog( { title: title, closeOnEscape: true, width: 600, position: [20,40], modal: false, resizable: false, draggable: false, close:function(event, id) { $(this).dialog('destroy'); } }); } $(function () { $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('<span class="ui-icon ui-icon-plusthick"><\/span>') .end() .find(".portlet-content"); $(".portlet-header .ui-icon").click(function() { $(this).toggleClass("ui-icon-minusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); $("#agenda a").click(function() { ViewDialog($(this).attr('name'), $(this).attr('title')); }); });