Website Development Prices

Website Development Prices

Wednesday, May 4, 2016

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:




No comments:

Post a Comment

Note: Only a member of this blog may post a comment.