Tabele CSS
Wygląd tabeli HTML można znacznie poprawić za pomocą CSS:
| Spółka | Kontakt | Kraj |
|---|---|---|
| Pudełko do karmienia Alfreda | Maria Anders | Niemcy |
| Supermarket Berglund | Christina Berglund | Szwecja |
| Centrum Handlowe Montezuma | Francisco Chang | Meksyk |
| poważny handel | Roland Mendel | Austria |
| Handel wyspą | Helen Bennett | Wielka Brytania |
| Królewskie jedzenie | Philip Cramer | Niemcy |
| Roześmiane Piwnice Bachusa | Yoshi Tannamuri | Kanada |
| Zebrane magazyny żywności | Giovanni Rovelli | Włochy |
Obramowania stołu
Aby określić obramowania tabeli w CSS, użyj borderwłaściwości.
Poniższy przykład określa czarną ramkę dla elementów <table>, <th> i <td>:
Przykład
table, th, td {
border: 1px solid black;
}
Tabela o pełnej szerokości
W niektórych przypadkach powyższa tabela może wydawać się niewielka. Jeśli potrzebujesz tabeli, która powinna obejmować cały ekran (na całej szerokości), dodaj width: 100%do elementu <table>:
Przykład
table {
width: 100%;
}
Podwójne obramowania
Zauważ, że tabela w powyższych przykładach ma podwójne obramowanie. Dzieje się tak, ponieważ zarówno tabela, jak i elementy <th> i <td> mają oddzielne obramowania.
Aby usunąć podwójne obramowanie, spójrz na poniższy przykład.
Zwiń obramowania tabeli
Właściwość border-collapseokreśla, czy obramowania tabeli powinny być zwinięte w jedno obramowanie:
Przykład
table
{
border-collapse: collapse;
}
Jeśli chcesz tylko obramować tabelę, określ tylko borderwłaściwość dla <table>:
Przykład
table
{
border: 1px solid black;
}