DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
title
>
<
style
>
#table{
width:
450px;
height:
35px;
border:
1px
solid
blue;
margin:
0px
auto;
background-color:
bisque;
}
td{
width:
120px;
color:
red;
}
.text{
margin:
0px;
margin-left:
20px;
float:
left;
text-align:
center;
line-height:
35px;
}
td span{
margin-left:
30px;
width:
60px;
text-align:
center;
color:
blue;
}
style
>
<
script
>
function
mouseover(
tab){
//var tab=document.getElementById("text1");
tab.
style.
color=
"blue";
tab.
style.
cursor=
"pointer";
}
function
mouseout(
tab){
// var tab=document.getElementById("text1");
tab.
style.
color=
"red";
}
function
click(
tab){
//var td=document.getElementsById("text1");
//td.style.color="green";
tab.
style.
fontWeight=
"bolder";
tab.
style.
backgroundColor=
"yellow";
}
script
>
head
>
<
body
>
<
table
id=
"table"
>
<
tr
>
<
td
onmouseover=
"mouseover(this)"
onmouseout=
"mouseout(this)"
onclick=
"click(this)"
>
<
p
class=
"text"
>Google
p
>
td
>
<
td
>
<
span
>|
span
>
td
>
<
td
onmouseover=
"mouseover(this)"
onmouseout=
"mouseout(this)"
onclick=
"click(this)"
>
<
p
class=
"text"
>Apple
p
>
td
>
<
td
>
<
span
>|
span
>
td
>
<
td
onmouseover=
"mouseover(this)"
onmouseout=
"mouseout(this)"
onclick=
"click(this)"
>
<
p
class=
"text"
>Microsoft
p
>
td
>
tr
>
table
>
body
>
html
>