Website Development Prices

Website Development Prices

Saturday, April 23, 2016

Kreiranje tabele 1 - svaki drugi red tabele razlicite boje (Creating table 1 - every second row of the table in color)

Pitanje: kreiranje tabele 1 - svaki drugi red tabele razlicite boje.

Resenje: klasa na elementu <tr> i svojstvo: background-color.

Primer:

HTML kod

<!DOCTYPE html>
<html>
<head>
<title>Kako da napravite tabelu 1</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>Svaki drugi red tabele u boji</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

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

.tabela1 {
  border: 1px 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: #90C3D4;
  color: #000000;
}

Rezultat:

Question: creating table 1 - every second row of the table in color.

Solution: class on the <tr> element and property: background-color.

Example:

HTML code

<!DOCTYPE html>
<html>
<head>
<title>How to create table 1</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>Every second row of the table in color</h1>
<table class="table1">
<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="color">
<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="color">
<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="color">
<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="color">
<td>Portugal</td>
<td>AJP</td>
<td>1987.</td>
<td>www.ajpmotos.com</td>
</tr>
</table>
</body>


</html>

CSS code

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

.table1 {
  border: 1px 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: #90C3D4;
  color: #000000;
}

Result:



No comments:

Post a Comment

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