Spalten einer Tabelle dynamisch ändern

Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können. Wie das geht wird hier an einem Beispiel demonstriert, die Daten der Tabelle kommen hierbei aus einer MySQL-Datenbank.

Demo:

Die Spalten der Tabelle haben immer die gleiche Breite, außer ein Wort ist breiter als eine Spalte dann wird die Spalte entsprechend verbreitert.

Wie immer an dieser Stelle folgt der Quelltext:

Quelltext  Kopieren ❘ Ausblenden ❘ Zeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Dynamische Spalten in einer Tabelle</title>

  <style>
  body, table {
   font-family: Verdana, Arial, Sans-Serif;
   font-size: 0.85rem;
  }

  td {
   vertical-align: top;
  }
  </style>

 </head>
<body>

<?php
// Verbindung zur Datenbank
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');

// Datensätze auslesen
$select = $db->query("SELECT `name`, `text` FROM `tabelle`");
$datensaetze = $select->fetchAll(PDO::FETCH_OBJ);
$anzahlDatensaetze = count($datensaetze);

// Anzahl der Spalten
$maxSpalten = 8;
$spalten = isset($_POST["spalten"]) ? $_POST["spalten"] : 1; // 1 = Vorauswahl
$spalten = $spalten > $maxSpalten || $spalten < 1 ? 1 : $spalten;

// Breite der Spalten
$spaltenBreite = floor(100 / $spalten);

// Formular
echo '<form method="post">
<p><label>Spalten: ' . $spalten . ' 
 <select name="spalten" size="1" onChange="this.form.submit()">
  <option></option>';

for ($i = 1; $i <= $maxSpalten; $i++) {
 echo '<option>' . $i . '</option>';
}

echo ' </select>
 </label></p>
</form>

<table border><tr>
';

// Ausgabe der Datensätze
foreach ($datensaetze as $nr => $datensatz) {
 echo '<td style="width:' . $spaltenBreite . '%">' .
  '<b>' . $datensatz->name . ':</b><br>' . $datensatz->text . '</td>';

 // Berechnen wann eine neue Tabellenzeile beginnt
 if (in_array($nr, range($spalten - 1, $anzahlDatensaetze, $spalten))) 
  echo '</tr><tr>';
}

echo '</tr></table>';
?>

</body>
</html>

Tipps

Lokalen Webserver einrichten und verwenden
Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.
Seiten dynamisch mit PHP erstellen
Vielleicht kennen Sie dieses Problem: Sie möchten gerne eine Seite ohne Frames erstellen, wollen aber auch nicht bei jeder Änderung an der Navigation alle Seiten ändern. Nur mit HTML gibt es hier keine Lösung und nicht jeder Benutzer hat JavaScript im Browser aktiviert, stattdessen sollten Sie auf PHP zurückgreifen.
Erster Eintrag in eine MySQL-Datenbank mit PHP
Eine Anleitung wie man ein Nachrichten-System mit einer MySQL (oder MariaDB)-Datenbank über PHP realisieren kann. Komplett mit Formularen zum eintragen, anzeigen und bearbeiten der Daten.
Diese Schlagwörter könnten Sie interessieren:
Favicon Sortierkasten Absolute URL Webseitenschutz SQLite localStorage Mimetypen Responsiv Zeitbalken Wecker Key Codes Mausrad Datenschutz-Hinweis Floodsperre Sprachumschaltung Fotoalbum Event-Kalender PHP-Fehlermeldungen Berechnungen Dateibrowser Dynamische Seiten Affenformular Zeichnen Zebra-Tabelle Arithmetische Operatoren