tabelle-lisa-data-tables.php
Quell Code
<!DOCTYPE html>
<html>
<head>
<title>arabiya</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<style>
* {
margin: 0;
padding: 0;
font-family: Levenim MT;
}
body {
background: url(Hintergrund.jpg);
background-size: cover;
display: flex;
flex-direction: column;
}
/*NAVIGATION*/
header{
display:flex;
flex-direction:row;
z-index: 1;
height: 100px;
background-color: black;
}
#logo{
width: 200px;
height: 80px;
margin: 6px;
}
nav{
margin-top: 40px;
margin-right: 0px;
display:flex;
min-width:500px;
width:100%;
}
nav a {
text-align: center;
display: block;
width: 15%;
height: 21px;
padding: 5px;
text-decoration: none;
font-weight: bold;
color: gold;
font-size: 1em;
border: solid gold;
}
nav a:hover {
color: black;
background: gold;
}
nav a:visited {
color:yellow;
}
#menu a:active{
color:red;
}
nav a:visited:hover {
color: black;
}
main{
display:flex;
flex-direction:column;
min-height:calc(100vh - 180px);
align-items: stretch;
}
.wrapper{
display:flex;
flex-direction:row;
padding:60px 0 60px 0px;
}
.wrapper h1 {
padding-top: 2px;
text-align: center;
margin: 2px;
font-size: 3em;
}
.wrapper h2 {
padding-top: 3px;
text-align: center;
margin: 2px;
font-size: 2em;
}
.vokabeln-content{
flex: 8;
}
hr{
border:2px solid black;
margin:15px;
}
.vokabeln-aside {
flex:2;
margin-top: 5px;
margin-bottom: 80px;
}
.vokabeln-aside a {
text-align: left;
display: block;
width: 100%;
height: 21px;
margin-top: 20px;
margin-left: 0px;
text-decoration: none;
font-weight: bold;
color: black;
font-size: 1.8em;
}
table {
width:100%;
border: 1px black solid;
border-collapse: collapse;
text-align: left;
table-layout: fixed;
font-size: 1.3em;
font-weight: bold;
}
th:nth-child(1){
width:10%;
min-width:75px;
}
th:nth-child(2){
width:10%;
min-width:70px;
}
th:nth-child(3){
width:10%;
min-width:55px;
}
th:nth-child(4){
width:10%;
min-width:55px;
}
th:nth-child(5){
width:10%;
min-width:175px;
}
th:nth-child(6){
width:50%;
min-width:270px;
}
th,
td {
border: 1px black solid;
border-collapse: collapse;
padding-left: 3px;
}
footer {
height: 80px;
display:flex;
padding-left:20px;
background-color: black;
}
footer a {
text-align: center;
display: block;
width: 80px;
height: 18px;
margin: 20px 12px 0 0;
text-decoration: none;
font-weight: bold;
color: gold;
font-size: 1.2em;
}
@media screen and (min-width: 701px){
table{
min-width:700px;
}}
@media screen and (max-width: 700px) and (min-width: 100px) {
table{
width:80vw;
font-size:2vw;
}
nav{
width:100%;
font-size:2.2vw;
}
nav a{
width:auto;
padding:1%;
}
th{
width:10%;
}
th:nth-child(6){
width:30%;
}
footer,header,body{
width:100vw;
}
}
</style>
</head>
<body>
<header>
<div id="logo">
<img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png"/>
</div>
<nav class="clearfix">
<a href="index.html" data-wert="??????" class="mmtest" data-wertvorher="Home">Home</a>
<a href="vokabeln.html" data-wert="????????" class="mmtest" data-wertvorher="Vokabeln">Vokabeln</a>
<a href="quran.html" data-wert="??????" class="mmtest" data-wertvorher="Quran">Quran</a>
<a href="#" data-wert="??????" class="mmtest" data-wertvorher="Konversation">Konversation</a>
<a href="#" data-wert="??????" class="mmtest" data-wertvorher="Materialien">Materialien</a>
</nav>
</header>
<main>
<div class="wrapper">
<div class="vokabeln-content">
<h1>Vokabeln</h1>
<h2>Arabisches Alphabet</h2>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<td class="sortierbar">Name</td>
<td class="sortierbar">Isoliert</td>
<td class="sortierbar">Ende</td>
<td class="sortierbar">Mitte</td>
<td class="sortierbar">Anfang</td>
<td class="sortierbar">Aussprache</td>
</tr>
</thead>
<tbody>
<tr>
<td>Alif</td>
<td>?</td>
<td>?</td>
<td>?*</td>
<td>?*</td>
<td>langes a</td>
</tr>
<tr>
<td>Bä</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>b</td>
</tr>
<tr>
<td>Tä</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>t</td>
</tr>
<tr>
<td>Thä</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>stimmlos wie engl. th in "think"</td>
</tr>
<tr>
<td>Dschim</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>stimmhaftes dsch</td>
</tr>
<tr>
<td>Hä</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>scharfes, gehecheltes h</td>
</tr>
</tbody>
</table>
</div>
<hr>
<aside class="vokabeln-aside">
<a href="#" id="Tiere">Tiere</a>
<a href="#" id="Büro">Büro</a>
<a href="#" id="Reisen">Reisen</a>
</aside>
</div>
</main>
<footer>
<a href="kontakt.html" id="Kontakt">Kontakt</a>
<a href="#" id="Impressum">Impressum</a>
</footer>
</body>
<script>
$('.mmtest').hover(function(){
var vorher=$(this).html();
var was=$(this).data('wert');
$(this).html(was);
}).mouseout(function(){
var vor=$(this).data('wertvorher');
$(this).html(vor);
});
</script>
<script>
$('#example').DataTable({
paging: false,
"scrollY": "80vh",
"scrollCollapse": true,
});
</script>
</html>