Homepagetabelle

Was ist eine Homepage-Tabelle?

• Die Homepagetabelle ist eine Tabelle für eine Webseite.

Welche Namen gibt es für Tabelle?

• Englisch: Responsive Table

Wie kann man eine Tabelle ersetzen?

• display: grid ersetzt die Tabelle.
• Statt <table> nutzt man <div style="display: grid">.
• Code:

<style>
/* (1) Auf dem PC-Monitor */
.thegrid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
}
 
/* (2) Auf dem Smartphone */
@media screen and (max-width:768px) {
  .thegrid { grid-template-columns: auto auto; }
}
</style>
 
<div class="thegrid">
  <!-- Obere Bereich -->
  <div class="head">Spalte 1</div>
  <div class="head">Spalte 2</div>
  <div class="head">Spalte 3</div>
  <div class="head">Spalte 4</div>
 
  <!-- Reihen -->
  <div class="cell">Spalte 1</div>
  <div class="cell">Spalte 2</div>
  <div class="cell">Spalte 3</div>
  <div class="cell">Spalte 4</div>
</div>

Wie kann man eine Tabelle horizontal scrollen?

• Man nutzt CSS-Code:

table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

oder:

<table style="display: block;max-width: -moz-fit-content;max-width: fit-content;margin: 0 auto;overflow-x: auto;white-space: nowrap;">

oder:

<div style="overflow-x:auto;">

<table>

hier Tabelleninhalt...
</table>


</div>

oder:

<table style="display: block;max-width: -moz-fit-content;max-width: fit-content;margin: 0 auto;overflow-x: auto;white-space: nowrap;">

oder:

Man kann auch vor die Tabelle ein div schreiben.

<div style='overflow-x:auto'>

Am Ende schließt man mit </div> ab.

</div>

Wie kann man eine Tabelle umbrechen?

• Eine Tabelle passt nicht auf einem schmalen Smartphone.
• Um das zu verhindern, nutzt man den CSS-Code:

<style>
.voll { width: 100%; }
</style>
 
<table class="voll">
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
</tr>
<tr>
<td>Spalte 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
</tr>
</table>

oder:

<style>
.hidder { width: 100%; }
@media screen and (max-width:768px) {
  .tohide { display: none; }
}
</style>
 
<table class="hidder">
  <tr>
    <th>Spalte 1</th>
    <th>Spalte 2</th>
    <th class="tohide">Spalte 3</th>
    <th class="tohide">Spalte 4</th>
    <th>Spalte 5</th>
  </tr>
  <tr>
    <td>Spalte 1</td>
    <td>Spalte 2</td>
    <td class="tohide">Spalte 3</td>
    <td class="tohide">Spalte 4</td>
    <td>Spalte 5</td>
  </tr>
</table>

oder:

<style>
.gridtable { width: 100%; }
@media screen and (max-width:768px) {
  .gridtable, .gridtable thead, .gridtable tbody, .gridtable tr {
    display: grid; 
    width: 100%; 
  }
  .gridtable tr { grid-template-columns: auto auto auto; }
}
</style>
 
<table class="gridtable">
  <tr>
    <th>Spalte 1</th>
    <th>Spalte 2</th>
    <th>Spalte 3</th>
    <th>Spalte 4</th>
    <th>Spalte 5</th>
  </tr>
  <tr>
    <td>Spalte 1</td>
    <td>Spalte 2</td>
    <td>Spalte 3</td>
    <td>Spalte 4</td>
    <td>Spalte 5</td>
  </tr>
</table>