Umiejętne stylizowanie tabeli ( czy zrobiłem to poprawnie? ).

pytanie zadane 26 stycznia 2019 w HTML i CSS przez Jakub 0 Pasjonat (23,120 p.)
zamknięte 26 stycznia 2019 przez Jakub 0

Witam, przy stylizowaniu w CSS różnych rzeczy ( np. tabel ) mam spore problemy i dylematy. Problem dotyczy głównie tego jaki selektor stylizować, mogę np. ustawić czcionkę dla całej tabeli i mogę też ją ustawić dla pojedynczych <th> i <td>... a rezultat będzie ten sam :/ Podałem tu tylko taki przykład, może są jakieś odgórne zasady kolejności stylizowania. Kolejna i zasadnicza sprawa dotyczy tego że chciałem wystylizować tylko jedną tabelę a nie wszystkie jakie mogą się pojawić ( czyli logiczne że trzeba używać klas i id ). Nie chciałem jednak nadawać klasy każdej komórce, wsadziłem więc tabelę do jednego diva i stylizowałem ją jako jego potomek. Oto kod:

<!DOCTYPE html>

<html lang="pl-PL">

    <head>
        <meta charset="utf-8"/>

        <style>

            #tab1 table, th, td {
                border-spacing: 10px;
                font-size: 20pt;
                font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            }

            #tab1 th, td {
                padding: 10px;
                text-align: center;
            }

            #tab1 thead th {
                border-bottom: 1px #000000 solid; 
                font-weight: bold;
                color: #520707;
            }

            #tab1 tfoot td {
                border-top: 1px #000000 solid; 
                empty-cells: hide;
            }

            .date {
                color: #186069;
            }

        </style>

    </head>

    <body>

        <div id="tab1">

            <table>

                <thead>
                    <tr>
                        <th>data</th>
                        <th>przychód</th>
                        <th>wydatki</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr>
                        <td class="date">26.01.19</td>
                        <td>3500zł</td>
                        <td>3100zł</td>
                    </tr>
                    <tr>
                        <td class="date">26.02.19</td>
                        <td>5000zł</td>
                        <td>2000zł</td>
                    </tr>
                    <tr>
                        <td class="date">26.03.19</td>
                        <td>9090zł</td>
                        <td>4300zł</td>
                    </tr>
                </tbody>
        
                <tfoot>
                    <tr>
                        <td></td>
                        <td>podsumowanie: x</td>
                        <td>podsumowanie: x</td>
                    </tr>
                </tfoot>
        
            </table>

        </div>

    </body>

</html>

Ale nie mam pojęcia czy takie podejście jest dobre oraz bezpieczne ( stabilne ), będę bardzo wdzięczny za porady.

komentarz zamknięcia: jest już odpowiedź

1 odpowiedź

odpowiedź 26 stycznia 2019 przez arces Pasjonat (17,700 p.)
wybrane 26 stycznia 2019 przez Jakub 0

Najlepsza

Po pierwszej to nie stylizuj po ID. Styl tabeli możesz nadać dodając do <table> po prostu klasę. Po co tam umieszczać dodatkowego diva, jeżeli możesz nadać klasę też tabeli i po niej stylizować? Co do Twojego głównego pytania, to tak naprawdę wszystko zależy od tego co chcesz osiągnąć. Oba sposoby są dobre i poprawne. Jeżeli nie chcesz indywidualnie stylizować komórek tabeli lub nagłówków, to możesz nadać styl dla całej tabeli, jeżeli chcesz to rozgraniczyć to musisz użyć już wtedy podziału na td i th.

P.S.

Najlepiej unikaj również zagnieżdżania selektorów, staraj się także nie stylizować po elementach HTML, a właśnie przy użyciu klas.