Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Tabele] Tabele wielokątne
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Asmox
6.06.2009, 18:31:15
Chciałbym się dowiedzieć, czy istnieje jakiś sposób na stworzenie tabeli, która ma więcej komórek w danych kolumnach, unikając tworzenia całych wierszy z komórkami. Klasycznym przykładem takiego rozwiązania jest na przykład faktura:
Kod
                     +--------------+-----+-------+----------+-----------+
                     |nazwa_produktu|ilość|podatek|cena_netto|cena_brutto|
                     +--------------+-----+-------+----------+-----------+
                     |produkt 1     |50   |22%    |1000 zł   |1220 zł    |
                     +--------------+-----+-------+----------+-----------+
                                          |   SUMA|1000 zł   |1220 zł    |

Jak widzicie, kolumny nazwa_produktu, ilość i podatek mają tylko 2 komórki (nagłówek i dane), a podatej, cena_netto i cena_brutto 3. Czy dałoby się zrobić coś na kształt tego w HTML'u? Jeżeli nie, to czy dałoby się uczynić te komórki pustymi (bez obramowania komórki) bez stosowania wewnątrz nich stylu CSS border:none; ?
Crozin
6.06.2009, 18:43:16
colspan/rowspan?
Asmox
6.06.2009, 19:06:17
Nie, nie to rozwiązanie odpada, chyba że by użyć tego przy komórce najbardziej z brzegu (w bym przypadku SUMA). Chociaż faktycznie wpadło mi do głowy takie rozwiązanie, to czy nie dałoby się tego zrobić inaczej?
Crozin
6.06.2009, 19:34:42
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Przykładowy dokument</title>
    
    <style type="text/css">
        td, th{
            border: 1px solid #000;
        }

        #table1 th[scope=row]{
            text-align: right;
        }

        #table2{
            empty-cells: hide;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
    <table id="table1">
        <thead>
            <tr>
                <th>Nazwa produktu</th>
                <th>Ilość</th>
                <th>Podatek</th>
                <th>Cena netto</th>
                <th>Cena brutto</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th scope="row" colspan="3">Suma</th>
                <td>146</td>
                <td>200</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Produkt X</td>
                <td>123</td>
                <td>22%</td>
                <td>88</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Produkt X</td>
                <td>123</td>
                <td>22%</td>
                <td>88</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

    <table id="table2">
        <thead>
            <tr>
                <th>Nazwa produktu</th>
                <th>Ilość</th>
                <th>Podatek</th>
                <th>Cena netto</th>
                <th>Cena brutto</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <th scope="row">Suma</th>
                <td>146</td>
                <td>200</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Produkt X</td>
                <td>123</td>
                <td>22%</td>
                <td>88</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Produkt X</td>
                <td>123</td>
                <td>22%</td>
                <td>88</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
erix
6.06.2009, 19:43:42
Kod
#table1 th[scope=row]{
            text-align: right;
        }

Ekhm, a co z IE?
Asmox
6.06.2009, 20:24:22
Rozwiązanie nawet może być, chociaż z tymi nagłówkami o stopkami, to generowanie automatycznie w php będzie robione. No coż, to nie to, o co mi chodziło, ale w sumie też niech będzie.
Crozin
6.06.2009, 21:14:52
Cytat
Ekhm, a co z IE?
To jest przykład... smile.gif
Cytat
chociaż z tymi nagłówkami o stopkami, to generowanie automatycznie w php będzie robione
Hmm... ale co z tego, że z automatu poleci?
Asmox
6.06.2009, 22:51:50
Cytat
Hmm... ale co z tego, że z automatu poleci?

Bo te twoje rozwiązanie z <tbody>, <tfooter> i <theader> jest trochę... dziwne
Crozin
7.06.2009, 07:48:50
Eee... jest semantyczne?

Poza tym nadal nie wiem, dlaczego fakt, że będzie to generowane skryptowo miałoby utrudnić zbudowane takiej tabelki.
Zajec
7.06.2009, 09:22:28
Przed komórką z SUMA dodaj po prostu
Kod
<td colspan="2" style="border: 0;"></td>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.