tabele

Kako narediti HTML tabelo s CSS slogom

Tabela je strukturiran način za prikaz podatkov v vrsticah in stolpcih. Uporablja se za sistematično organizacijo podatkov, kar omogoča lažje prebiranje, razumevanje in analizo informacij.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>tabela</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

.tabela {
            width: 100%;
            border-collapse: collapse;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

.tabela th, .tabela td {
            text-align: left;
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

.tabela th {
            background-color: #007BFF;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 0.03rem;
        }

.tabela tr:nth-child(even) {
            background-color: #f8f9fa;
        }

.tabela td {
            color: #333;
        }

.tabela tr:last-child td {
            border-bottom: none;
        }

.tabela a {
            color: #007BFF;
            text-decoration: none;
        }

.tabela a:hover {
            text-decoration: underline;
        }

@media screen and (max-width: 768px) {
            .tabela thead {
                display: none; /* Skrijemo glavo tabele */
            }

.tabela tr {
                display: block;
                margin-bottom: 10px;
                background-color: white;
                border: 1px solid #ddd;
                border-radius: 8px;
                overflow: hidden;
            }

.tabela td {
                display: flex;
                justify-content: space-between;
                padding: 10px;
                font-size: 0.9rem;
                color: #555;
                border: none;
                border-bottom: 1px solid #eee;
            }

.tabela td:last-child {
                border-bottom: none;
            }

.tabela td::before {
                content: attr(data-label); /* Nastavi nalepko iz atributa `data-label` */
                font-weight: bold;
                color: #333;
                text-transform: uppercase;
                flex-shrink: 0;
            }

.tabela a:hover {
                text-decoration: none;
            }
        }
    </style>
</head>
<body>
<table class="tabela">
    <thead>
    <tr>
        <th>Ime</th>
        <th>Priimek</th>
        <th>Točke</th>
        <th>Podrobnosti</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td data-label="Ime">Prva</td>
        <td data-label="Priimek">Oseba</td>
        <td data-label="Točke">583</td>
        <td data-label="Podrobnosti"><a href="#">Poglej</a></td>
    </tr>
    <tr>
        <td data-label="Ime">Druga</td>
        <td data-label="Priimek">Oseba</td>
        <td data-label="Točke">946</td>
        <td data-label="Podrobnosti"><a href="#">Poglej</a></td>
    </tr>
    <tr>
        <td data-label="Ime">Tretja</td>
        <td data-label="Priimek">Oseba</td>
        <td data-label="Točke">167</td>
        <td data-label="Podrobnosti"><a href="#">Poglej</a></td>
    </tr>
    <tr>
        <td data-label="Ime">Četrta</td>
        <td data-label="Priimek">Oseba</td>
        <td data-label="Točke">1973</td>
        <td data-label="Podrobnosti"><a href="#">Poglej</a></td>
    </tr>
    <tr>
        <td data-label="Ime">Peta</td>
        <td data-label="Priimek">Oseba</td>
        <td data-label="Točke">173</td>
        <td data-label="Podrobnosti"><a href="#">Poglej</a></td>
    </tr>
    </tbody>
</table>

</body>
</html>