The source code in github is stored in a html table like this:
<table><tbody>
<tr><td>1</td><td>// here is a comment</td></tr>
<tr><td>2</td><td>var i = 1;</td></tr>
<tr><td>3</td><td>console.log(i);</td></tr>
</tbody></table>
How can I select/highlight this table so that I don't select the line numbers ?
In other words: How can I select only a portion of a second column ?
I know github does it but I can't work out how
possibly without jquery
What they have done is something like this ...
<table><tbody>
<tr>
<td class='line-number'>1</td>
<td class='line-code'>// here is a comment</td>
</tr>
<tr>
<td class='line-number'>2</td>
<td class='line-code'>var i = 1;</td>
</tr>
<tr>
<td class='line-number'>3</td>
<td class='line-code'>console.log(i);</td>
</tr>
</tbody></table>
Then, all they do is change the background and/or foreground for the class line-code.
.line-code {
background-color: silver;
color: white;
}
To keep the numbers from being selected, try this ...
.line-number {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
This will block the content from being selected, therefore allowing a clean copy.
Or if you don't want to use classes you could always use something like this.
tr td+td {
background-color: #aaa;
}
<table><tbody>
<tr>
<td>1</td>
<td>// here is a comment</td>
</tr>
<tr>
<td>2</td>
<td>var i = 1;</td>
</tr>
<tr>
<td>3</td>
<td>console.log(i);</td>
</tr>
</tbody></table>
Use the user-select: none style to disable user selection. You should add its vendor-prefixed equivalents to make the CSS cross browser compatible.
table {
border-collapse: collapse;
border-spacing: 0;
}
table tr td {
padding-left: 5px;
padding-right: 5px;
}
table tr > td:first-child {
width: 30px;
text-align: right;
border-right: 1px solid #ccc;
background-color: #eee;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<table>
<tbody>
<tr><td>1</td><td>// here is a comment</td></tr>
<tr><td>2</td><td>var i = 1;</td></tr>
<tr><td>3</td><td>console.log(i);</td></tr>
</tbody>
</table>
Here is a solution
html:
<table><tbody>
<tr><td>1</td><td>// here is a comment</td></tr>
<tr><td>2</td><td>var i = 1;</td></tr>
<tr><td>3</td><td>console.log(i);</td></tr>
<tr><td>4</td><td>console.log(i);</td></tr>
<tr><td>5</td><td>console.log(i);</td></tr>
<tr><td>6</td><td>console.log(i);</td></tr>
<tr><td>7</td><td>console.log(i);</td></tr>
<tr><td>8</td><td>console.log(i);</td></tr>
<tr><td>9</td><td>console.log(i);</td></tr>
<tr><td>10</td><td>console.log(i);</td></tr>
<tr><td>11</td><td>console.log(i);</td></tr>
<tr><td>12</td><td>console.log(i);</td></tr>
<tr><td>13</td><td>console.log(i);</td></tr>
<tr><td>14</td><td>console.log(i);</td></tr>
<tr><td>15</td><td>console.log(i);</td></tr>
</tbody></table>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
css:
body{
color:black;
}
table{
margin-left: 10%;
margin-right: 10%;
width:80%;
}
td:nth-child(1){
cursor: pointer;
width: 5%;
background-color: #ddd;
text-align: right;
padding-right: 5px;
}
td:nth-child(1):hover{
color:white;
background-color: black;
}
td:nth-child(2){
cursor: pointer;
width: 95%;
background-color: #eee;
}
.highlight td:nth-child(1){
color:white;
background-color: black;
}
.highlight td:nth-child(2){
background-color: #BFDA18;
}
js:
$(document).ready(function(){
$('tr td:nth-child(1)').click(function(){
$('tr.highlight').removeClass('highlight');
$(this).parent().addClass('highlight');
});
});
codepen link: http://codepen.io/anon/pen/jELOwY
Related
I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.
I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.
I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.
The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):
Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...
I'd advise working on the user experience a little, but the basic mechanics are there.
$( document ).ready(function() {
$(".expand").click( function () {
// Show .description if hidden, hide if currently showing
$(this).closest("td").find(".description").toggle();
// A little bit of styling to show the user the content has been expanded
if ( $(this).hasClass("blue-text") ) {
$(this).removeClass("blue-text");
} else {
$(this).addClass("blue-text");
}
});
});
.description {
display:none;
}
.blue-text {
color: blue;
}
table {
font-family: arial, sans-serif;
width: 100%;
background-color: rgba(0, 0, 0, 0);
padding-top: 50px
}
td,
th {
border: 1px solid rgb(200, 200, 200);
text-align: center;
padding: 8px;
}
th {
font-weight: normal;
background-color: rgba(222, 222, 222, 0.6)
}
.modules th {}
tr:hover {
background-color: rgba(20, 91, 130, 0.3)
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Module ID</th>
<th width="70%">Module</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to CS <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to Uni <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to German</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
</table>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
when a div .TQA-SF006-U-160mm-parent is clicked, I want .div-TQA-SF006-U-160 to be displayed always and .div-TQA-SF006-U-static to be hidden after mouseout function is executed.
Any help would be appreciated.
JSFiddle example here
one easy way to do this is to add a global variable to check, whether that div condition is clicked or not. Then, you execute mouseover and mouseout event, when that div is not clicked
var clicked = false;
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
}
});
$(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
}
});
$(".TQA-SF006-U-160mm-parent").click(function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
clicked = true;
}
else{
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
clicked = false;
}
});
demo : https://jsfiddle.net/xpk82w65/4/
Also, you can attach binding to same elements, without re-calling those elements.
for example :
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
})
.on('mouseout', function(){
})
.on('click', function(){
});
demo : https://jsfiddle.net/xpk82w65/6/
You can add a class to track the state of the element you're hovering/clicking, and only use the mouseover/mouseout code if the state is not clicked.
$(document).ready(function() {
var $parent = $(".TQA-SF006-U-160mm-parent"),
$static = $(".div-TQA-SF006-U-static"),
$160 = $(".div-TQA-SF006-U-160");
$parent.on('mouseover', function() {
if (!$(this).hasClass('clicked')) {
$static.addClass('hide');
$160.addClass('show');
}
}).on('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$static.removeClass('hide');
$160.removeClass('show');
}
}).on('click', function() {
$(this).addClass('clicked');
$static.addClass('hide');
$160.addClass('show');
});
});
.div-TQA-SF006 .td-suspension-child-row2:hover {
text-decoration: underline;
}
.table-suspension-list {
border: 0;
}
.table-suspension-list .partNumber {
border: 1px solid #1F497D;
border-bottom: 1px solid white;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber-bottom {
border: 1px solid #1F497D;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber div {
color: white;
}
.table-suspension-list .partNumber-bottom div {
color: white;
}
.table-suspension-list .partDescription {
border: 1px solid #1F497D;
color: #1F497D;
font-family: erasFamily;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.table-suspension-list .partDescription div {
color: #1F497D;
}
.table-suspension tbody {
text-align: center;
vertical-align: middle;
color: #002060;
}
.table-suspension th {
background-color: white;
border: 0;
border-top: 2px solid #002060;
padding: 10px 0 10px 0;
vertical-align: middle;
font-family: erasFamily;
font-size: 26px;
color: #002060;
text-transform: uppercase;
}
.td-suspension-parent {
background-color: #deeaf6;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.td-suspension-child {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child-row2 {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.td-suspension-child-row2 div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.div-TQA-SF006-U-160 {
display: none;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPECIFICATIONS
</th>
<tr>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
</tr>
<tr>
<td class="td-suspension-child" colspan="3">TQA-SF006</td>
<td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
</tr>
<tr>
<td class="td-suspension-parent" colspan="6">Available Ride Height</td>
</tr>
<tr>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-160mm-parent">160mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-200mm-parent">200mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-250mm-parent">250mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-275mm-parent">275mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-300mm-parent">300mm</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-static">
<table class="table-suspension">
<tbody>
<th>
Spare Parts
</th>
<tr>
<td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-160">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPARE PARTS
</th>
<tr>
<td class="td-suspension-parent">TQA-SPA07</td>
<td class="td-suspension-parent">TQA-PB006</td>
<td class="td-suspension-parent">TQA-AB08</td>
<td class="td-suspension-parent">TQA-SA08</td>
<td class="td-suspension-parent">TQA-UB001</td>
<td class="td-suspension-parent">TQA-SPA20</td>
</tr>
<tr>
<td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
<td class="td-suspension-chlid">Pivot Bolt Kit</td>
<td class="td-suspension-chlid">Air Spring</td>
<td class="td-suspension-chlid">Shock Absorber</td>
<td class="td-suspension-chlid">U-Bot Kit</td>
<td class="td-suspension-chlid">Spring Bush</td>
</tr>
</tbody>
</table>
</div>
Below is the html code I have mentioned even number row format is different.
But if string "QACheck:" in row. I need to use odd number row format Even it comes in Even number row. Please help
For Even number row I used like below:
tr:nth-child(even){background-color: #f2f2f2}
Below is the code.
<!DOCTYPE html>
<html>
<style>
p {
font-family : Calibri;
font-size: 14px;
font-weight: bolder;
text-align : left;
}
p.fade {
color : #CCCCCC;
font-size: 14px;
}
em {
font-style : italic ;
font-size : 16px;
font-weight: lighter ;
}
em.pass {
font-style : italic ;
font-size : 16px;
color: green ;
}
em.fail {
font-style : italic ;
font-size : 16px;
color: red ;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
hr {
align: left ;
margin-left: 0px ;
width: 500px;
height:1px;
}
table {
border-collapse: collapse;
}
tr {
padding: 4px;
text-align: center;
border-right:2px solid #FFFFFF;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #cceeff;
color: black;
padding: 4px;
border-right:2px solid #FFFFFF;
}
</style>
<body>
<table>
<td style='color:Coral'>QACheck: ABC</td>
<tr>
<th>PARA</th>
<th>OT</th>
<th>QA</th>
<th>Reason</th>
</tr>
<tr>
<td>FruitName</td>
<td>Apple</td>
<td>OK</td>
<td></td>
</tr>
<tr>
<td style='color:Coral'>QACheck: XYZ</td>
<tr>
<th>PARA</th>
<th>OT</th>
<th>QA</th>
<th>Reason</th>
</tr>
<tr>
<td>FruitName</td>
<td>Orange</td>
<td>OK</td>
<td></td>
</tr>
<tr>
<td>VegName</td>
<td> drumstick</td>
<td>OK</td>
<td></td>
</tr>
</table>
</body>
</html>
In HTML, you can add data attributes that are not rendered on the page, but can be used by Javascript or CSS.
If you use CSS attribute selector then you can target and style the nodes you want based on those data-* attributes.
An example :
tr:nth-child(odd) { background-color: #9999FF; }
tr[data-type="QA"] { color: #ff0000; }
<table>
<tr data-type="QA">
<td>this is red</td>
</tr>
</table>
This can be combined with regular general rule nth-child to acheive the result you want.
If you have several rules that contradict, you can make one more important by appending ´!important` after it :
tr[data-type="QA"] { color: #ff0000 !important; }
I have a table of data which cols is determined automatically with its data.
but I need to fix first row as header title "for scrolling it remains fix at the top". when I give it position:fixed , header row`s width shrinks comparing to others!!!
first pic before setting position:fixed :
after setting position:fixed:
I can't change my structure code, because there are too many similar tables !!!! Only css or javascript can be used.
my code :
<table class="list_row_container">
<tr class="list_row_title">
<td width="30px" align="center"><input type="checkbox" id="keyCheckbox" onclick="updateCheckboxes(this.checked)"></td>
<td>
تاریخ ثبت
</td>
<td>
نوع کاربری
</td>
<td>
آدرس منطقه
</td>
<td>
زیر بنا
</td>
<td>
طبقه
</td>
<td>
اتاق
</td>
<td>
عمر
</td>
<td>
اجاره
</td>
<td>
ودیعه
</td>
<td> مشاهده</td>
</tr>
<tr class="list_row_even" id="row492314" >
<td align="center"><input type="checkbox" name="info[rowIds][492314]"></td>
<td class="list_field_container"><span class"list_field_normaltext">1394/02/29</span></td>
<td class="list_field_container"><span class"list_field_normaltext">موقعيت اداري </span></td>
<td class="list_field_container"><span class"list_field_normaltext">.بلوار فردوس غرب پروانه شمالي خ شقايق غربي پ 8</span></td>
<td class="list_field_container"><span class"list_field_normaltext">100</span></td>
<td class="list_field_container"><span class"list_field_normaltext">2</span></td>
<td class="list_field_container"><span class"list_field_normaltext">2</span></td>
<td class="list_field_container"><span class"list_field_normaltext">1</span></td>
<td class="list_field_container"><span class"list_field_normaltext"> -</span></td>
<td class="list_field_container"><span class"list_field_normaltext">660,000,000</span></td>
<td>
<a id="viewmbt-492314" style="cursor: pointer;" title="مشاهده مشاور"><img src="../images/search.png" alt="مشاهده" /></a>
<a id="viewmbt2-492314" style="cursor: pointer;" title="مشاهده مشتری"><img src="../images/groupIcon.png" alt="مشاهده" /></a>
</td>
</tr>
....
css style :
.list_container
{
width:100%; border:1px solid #395bc2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
min-height:100px;
display:table;
}
.list_header
{
width:98%; padding:1%; height:10px;
background: #c9e3fd; /* Old browsers */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color:#000099;
line-height:10px;
font-size: 18px;
}
.list_footer_container
{
background-color: #ffcc99;
font-size: 14px;
color: black;
padding: 10px;
}
.list_has_no_row
{
font-family: sans-serif;
font-size: 13px;
color: red;
}
.list_row_container img
{
width: 25px;
height: 25px;
}
.fixed-header{
position: fixed;
top:0px;
}
.list_row_container
{
border-top: 1px silver navy;
width: 100%;
text-align: center;
}
.list_row_title
{
background-color: #ffcc99;
font-size: 14px;
color: #000099;
}
.list_row_title td{padding: 10px;}
.list_row_even
{
background-color: #ffffff;
font-size: 14px;
color: black;
}
.list_row_even:hover
{
background-color: #ffcc99;
}
.list_row_odd
{
background-color: #c9e3fc;
font-size: 14px;
color: black;
}
.list_row_odd:hover{
background-color: #ffcc99;
}
.list_field_container
{
text-align: center;
padding: 0px;
margin: 0px;
}
.list_row_title {
background-color: #9c42a0;
color: #fff;
position: fixed;
}
this is the solution :
$(document).ready(function(){
/// get the td`s width automatically and set inline style width for all tds
$(".list_row_title td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $(".list_row_container td").eq(index).width();
});
});
$(".list_row_even td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $(".list_row_container td").eq(index).width();
});
});
///if scroll make fix header tr
var $window = $(window);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 250) {
$(".list_row_title").addClass('fixed_table_header');
}
else {
$(".list_row_title").removeClass('fixed_table_header');
}
});
});
style :
.fixed_table_header
{
position: fixed;
top:0;
}
Hi in the below code how to give the space to two tr rows and i want to divide with this symbol.and background color should occupy the full table.first row no need this | i want to divide all the left side row with full | symbol and then right side td's
can any one help me
Expected output:
About Us | Latest News
Facilities Events
Doctors Gallery
Our Blogs Contact Us
html
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
css
#slider1 footer {
background-color:#00008B;
width:100%;
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
see this: http://jsfiddle.net/ze0587d0/
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
td{
padding:5px;
}
.border-right{
border-right:1px solid #000;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class='border-right'>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
just add a class for the first td, where you want | sign, and the css border-right:1px solid #000;
Edit:
According to the comment by OP,
If you want all td's having a saperation with |, see this: http://jsfiddle.net/ze0587d0/2/
you need to add a border-right to all tds which are first-child of tr,
tr td:first-child{
border-right:1px solid #000;
}
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
tr td:first-child{
border-right:1px solid #000;
}
td{
padding:5px;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td >About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
I think this is what you are after...it uses your pseudo-element but positions it absolutely.
#slider1 footer {
background-color: #00008B;
width: 100%;
color: white;
}
#slider1 table {
table-layout: fixed;
}
#slider1 footer tr td {
padding: 0 1rem;
position: relative;
}
#slider1 footer tr:first-of-type td:first-child:after {
position: absolute;
right: 0;
content: "|";
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>