Cara membuat tabel php menggunakan css

in #php • 15 days ago

Untuk membuat tabel dengan CSS dan menampilkannya menggunakan PHP, Anda dapat mengikuti langkah-langkah berikut:

1. Buat Tabel HTML dengan PHP

Gunakan PHP untuk menghasilkan kode HTML tabel. Anda dapat menyesuaikan jumlah baris dan kolom sesuai kebutuhan.

2. Tambahkan Gaya Tabel dengan CSS

Gunakan CSS untuk mempercantik tampilan tabel seperti memberikan warna, padding, border, atau gaya lain.

Berikut contoh implementasinya:

Contoh: File index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel dengan CSS dan PHP</title>
    <style>
        /* CSS untuk tabel */
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #e1f5fe;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">Tabel Dinamis dengan CSS dan PHP</h1>

    <?php
    // PHP untuk membuat tabel
    $rows = 5; // Jumlah baris
    $columns = 4; // Jumlah kolom

    echo "<table>";
    echo "<tr>";
    for ($col = 1; $col <= $columns; $col++) {
        echo "<th>Kolom $col</th>";
    }
    echo "</tr>";

    for ($row = 1; $row <= $rows; $row++) {
        echo "<tr>";
        for ($col = 1; $col <= $columns; $col++) {
            echo "<td>Baris $row, Kolom $col</td>";
        }
        echo "</tr>";
    }
    echo "</table>";
    ?>
</body>
</html>

Penjelasan Kode

  1. CSS untuk Tabel:

    • table: Gaya umum untuk tabel, seperti lebar, margin, dan tata letak border.
    • th, td: Memberikan border, padding, dan pengaturan teks.
    • tr:nth-child(even): Membuat warna latar belakang bergantian untuk setiap baris genap.
    • tr:hover: Memberikan efek hover saat kursor berada di atas baris.

  2. PHP untuk Dinamika Tabel:

    • Loop digunakan untuk membuat baris ($row) dan kolom ($col).
    • Konten setiap sel dapat diisi sesuai kebutuhan (contoh: "Baris X, Kolom Y").

  3. Responsif:
    File ini responsif karena menggunakan width: 80%; pada tabel, sehingga ukurannya menyesuaikan layar.

Hasil

  • Sebuah tabel dinamis dengan 5 baris dan 4 kolom.
  • Tabel memiliki warna latar belakang bergantian dan efek hover pada baris.

Anda dapat menyesuaikan gaya tabel dengan menambahkan elemen desain sesuai kebutuhan.

15 days ago in #php by
$0.00
    3 votes
    Reply 0