Skola Tutorijala - School of Tutorials: Kreiranje tabele 2 - kako promeniti boju pozadinu reda kada se misem predje preko (Creating table 2 - how to change the background color of raw when you hover over)

Pitanje: Kreiranje tabele 2 - kako promeniti boju pozadine reda kada se misem predje preko?

Resenje: svojstvo: hover.

Primer :

HTML kod - opcija 1

<!DOCTYPE html>
<html>
<head>
<title>Kako da napravite tabelu 2</title>

<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1>Kako promeniti boju pozadine reda kada se misem predje preko?</h1>
<table class="tabela1">
<caption>Lista proizvodjaca motora</caption>
<tr>
<th scope="col">Zemlja</th>
<th scope="col">Motor</th>
<th scope="col">Osnovano</th>
<th scope="col">Vebsajt</th>
</tr>
<tr class="boja">
<td>Austrija</td>
<td>KTM</td>
<td>1934.</td>
<td>www.ktm.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Suzuki</td>
<td>1909.</td>
<td>www.suzuki.co.jp</td>
</tr>
<tr class="boja">
<td>Italija</td>
<td>Ducati</td>
<td>1926.</td>
<td>www.ducati.com</td>
</tr>
<tr>
<td>USA</td>
<td>Harley-Davidson</td>
<td>1903.</td>
<td>www.harley-davidson.com</td>
</tr>
<tr class="boja">
<td>Brazil</td>
<td>Agrale</td>
<td>1962.</td>
<td>www.agrale.com.br</td>
</tr>
<tr>
<td>Belorusija</td>
<td>Minsk</td>
<td>1952.</td>
<td>/</td>
</tr>
<tr class="boja">
<td>Portugalija</td>
<td>AJP</td>
<td>1987.</td>
<td>www.ajpmotos.com</td>
</tr>
</table>
</body>

</html>

CSS kod - opcija 1

body {
font-family: Georgia, Times, 'Times New Roman', serif;
padding: 15px;
}

.tabela1 {
border: 3px solid #D6E4E6;
border-collapse: collapse;
width: 65%;
}

.tabela1 td {
border: 1px solid #D6E4E6;
padding: 5px;
}

.tabela1 th {
border: 1px solid #15A2D1;
background-color: #13A5D6;
font-weight: bold;
text-align: center;
padding-left: 5px;
}

.tabela1 caption {
color: #33517a;
text-align: left;
padding: 6px 0 12px 0;
}

.tabela1 tr:hover {
background-color: #90C3D4;
color: #000000;
}

Sacuvajte ovaj fajl kao style.css.

Rezultat:

HTML kod - opcija 2

<!DOCTYPE html>
<html>
<head>
<title>Kako da napravite tabelu 2</title>

<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style2.css">

</head>

.
.
.
.

Ostatak koda je isti kao u opciji 1.

CSS kod - opcija 2:

body {
font-family: Georgia, Times, 'Times New Roman', serif;
padding: 15px;
}

.tabela1 {
border: 3px solid #D6E4E6;
border-collapse: collapse;
width: 65%;
}

.tabela1 td {
border: 1px solid #D6E4E6;
padding: 5px;
}

.tabela1 th {
border: 1px solid #15A2D1;
background-color: #13A5D6;
font-weight: bold;
text-align: center;
padding-left: 5px;
}

.tabela1 caption {
color: #33517a;
text-align: left;
padding: 6px 0 12px 0;
}

.tabela1 tr.boja {
background-color: #126FCC;
color: #ffffff;
}

.tabela1 tr:hover {
background-color: #90C3D4;
color: #000000;
}

Sacuvajte ovaj fajl kao style2.css.

Rezultat:

Question: Creating table 2 - how to change the background color of raw when you hover over?

Solution: property: hover.

Example:

HTML code - option 1

<!DOCTYPE html>
<html>
<head>
<title>How to create table 2</title>

<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1>How to change the background color of raw when you hover over?</h1>
<table class="tabela1">
<caption>List of motorcycle manufacturers</caption>
<tr>
<th scope="col">Country</th>
<th scope="col">Motorcycle</th>
<th scope="col">Founded</th>
<th scope="col">Website</th>
</tr>
<tr class="boja">
<td>Austria</td>
<td>KTM</td>
<td>1934.</td>
<td>www.ktm.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Suzuki</td>
<td>1909.</td>
<td>www.suzuki.co.jp</td>
</tr>
<tr class="boja">
<td>Italy</td>
<td>Ducati</td>
<td>1926.</td>
<td>www.ducati.com</td>
</tr>
<tr>
<td>USA</td>
<td>Harley-Davidson</td>
<td>1903.</td>
<td>www.harley-davidson.com</td>
</tr>
<tr class="boja">
<td>Brazil</td>
<td>Agrale</td>
<td>1962.</td>
<td>www.agrale.com.br</td>
</tr>
<tr>
<td>Belarus</td>
<td>Minsk</td>
<td>1952.</td>
<td>/</td>
</tr>
<tr class="boja">
<td>Portugal</td>
<td>AJP</td>
<td>1987.</td>
<td>www.ajpmotos.com</td>
</tr>
</table>
</body>

</html>

CSS code - - option 1

body {
font-family: Georgia, Times, 'Times New Roman', serif;
padding: 15px;
}

.table1 {
border: 3px solid #D6E4E6;
border-collapse: collapse;
width: 65%;
}

.table1 td {
border: 1px solid #D6E4E6;
padding: 5px;
}

.table1 th {
border: 1px solid #15A2D1;
background-color: #13A5D6;
font-weight: bold;
text-align: center;
padding-left: 5px;
}

.table1 caption {
color: #33517a;
text-align: left;
padding: 6px 0 12px 0;
}

.table1 tr:hover {
background-color: #90C3D4;
color: #000000;
}

Save this file as style.css.

Result:

HTML code - option 2

<!DOCTYPE html>
<html>
<head>
<title>How to create table 2</title>

<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>

.
.
.
.
.

The rest of code is the same as in option 1.

CSS code - - option 2

body {
font-family: Georgia, Times, 'Times New Roman', serif;
padding: 15px;
}

.table1 {
border: 3px solid #D6E4E6;
border-collapse: collapse;
width: 65%;
}

.table1 td {
border: 1px solid #D6E4E6;
padding: 5px;
}

.table1 th {
border: 1px solid #15A2D1;
background-color: #13A5D6;
font-weight: bold;
text-align: center;
padding-left: 5px;
}

.table1 caption {
color: #33517a;
text-align: left;
padding: 6px 0 12px 0;
}

.table1 tr.color {
background-color: #126FCC;
color: #ffffff;
}

.table1 tr:hover {
background-color: #90C3D4;
color: #000000;
}

Save this file as style2.css.

Result: