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:
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.