<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<meta charset="utf-8"></meta>
<title>Page Title</title>
<meta name="description" content="Die Daten der Welt im Überblick"></meta>
<meta name="author" content="Michael Hübener und Selina Marie-Alice Schönherr"></meta>
<meta name="keywords" content="Welt, Daten, Überblick, HTML"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css"></link>
<script src="js/table.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"></link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"
integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
crossorigin="anonymous"></link>
</head>
<body>
<h1>World Data Overview ...</h1>
<div class="table-wrapper">
<table id="t02" class="world_table">
<thead>
<tr>
<th onclick="sortTable(0)">
id
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(1)">
name
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(2)">
birth rate / 1000
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(3)">
cell phones / 100
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(4)">
children / woman
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(5)">
electricity consumption / capita
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(6)">
gdp / capita
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<!--
<th onclick="sortTable(7)">
gdp / capita growth
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(8)">
inflation_annual
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(9)">
internet user / 100
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(10)">
life expectancy
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(11)">
military expenditure percent of gdp
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(12)">
gps lat
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(13)">
gps long
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
-->
</tr>
</thead>
<tbody>
<xsl:for-each select="Countries/Country">
<tr>
<td><xsl:value-of select="id"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="birth_rate_per_1000"/></td>
<td><xsl:value-of select="cell_phones_per_100"/></td>
<td><xsl:value-of select="children_per_woman"/></td>
<td><xsl:value-of select="electricity_consumption_per_capita"/></td>
<td><xsl:value-of select="gdp_per_capita"/></td>
<!--
<td><xsl:value-of select="gdp__per__capita__growth"/></td>
<td><xsl:value-of select="inflation_annual"/></td>
<td><xsl:value-of select="internet_user_per_100"/></td>
<td><xsl:value-of select="life_expectancy"/></td>
<td><xsl:value-of select="military_expenditure_percent_of_gdp"/></td>
<td><xsl:value-of select="gps_lat"/></td>
<td><xsl:value-of select="gps_long"/></td>
-->
</tr>
</xsl:for-each>
</tbody>
</table>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>