Naučte se, jak vytvořit okraj CSS tabulky za pouhých pět minut
Možná jste slyšeli, že se tabulky CSS a HTML nemíchají. To prostě není pravda. Ano, použití HTML tabulek pro rozvržení již není nejlepší praxí v oblasti webového návrhu, protože byly nahrazeny styly rozložení CSS, ale tabulky jsou stále správnou značkou, kterou lze použít k přidávání tabulkových dat na webovou stránku.
Bohužel, protože tolik profesionálů z webových stránek se z tabulky domnívá, že se jedná o jed, mnozí z těchto odborníků mají málo zkušeností s tímto běžným prvkem HTML a bojem, když se s nimi musí obrátit na webové stránce. Například pokud máte tabulku na stránce a chcete přidat do buněk tabulky interní linky.
Okraje tabulky CSS
Když použijete CSS pro přidání ohraničení do tabulek, přidává pouze okraj kolem vnější tabulky. Chcete-li přidat jednotlivé řádky do jednotlivých buněk této tabulky, je třeba přidat hranice k vnitřním elementům CSS. Můžete také použít tag HR pro přidání řádků uvnitř jednotlivých buněk.
Chcete-li použít styly obsažené v tomto článku, měli byste zřejmě mít tabulku na vaší webové stránce. Potom byste měli vytvořit list stylu jako interní styl listu v hlavičce vašeho dokumentu (pravděpodobně to uděláte jen tehdy, pokud je vaše "stránka" jedinou stránkou) nebo je k dokumentu připojena jako externí stylový list (to je to, co jste bude-li vaše stránky více stránek - umožňuje vám stylovat všechny stránky z jednoho externího listu). Styly přidáte, chcete-li přidat do této šablony stylů interiéru.
Než začneš
Nejdříve se musíte rozhodnout, kde chcete, aby se řádky objevily v tabulce. Máte několik možností, včetně:
- Okolo všech buněk tvoří síť;
- Umístění čar mezi sloupy;
- Jen mezi řádky; nebo
- Mezi konkrétními sloupci nebo řádky.
Můžete také umístit řádky kolem jednotlivých buněk nebo uvnitř jednotlivých buněk.
Jak přidat řádky kolem všech buněk v tabulce
Chcete-li přidat řádky kolem všech buněk v tabulce a vytvořit takový efekt podobný mřížce, přidejte do listu stylů následující položky:
td, th {
hranice: solid 1px černá;
}}
Jak přidat řádky mezi sloupy v tabulce
Chcete-li mezi sloupce přidat řádek (vytváří to svislé čáry, které se spouštějí shora dolů na sloupcích tabulky), přidejte do listu stylů následující položky:
td, th {
okraj-levá: solidní 1px černá;
}}
Potom, pokud nechcete, aby se objevily v prvním sloupci, musíte přidat do těchto buněk th a td buňku. V tomto příkladu předpokládáme, že na těchto buňkách existuje třída bez hranic a odstraníme hranici s tímto konkrétnějším pravidlem CSS. Takže zde je třída HTML, kterou bychom použili:
class = "no-border">
A pak jsme mohli přidat náš styl stylu:
.žádná hranice {
border-left: none;
}}
Jak přidat řádky mezi řádky v tabulce
Stejně jako při přidávání řádků mezi sloupci, můžete to udělat pouze jedním jednoduchým stylem přidaným ke stylu listu. Následující CSS by přidávaly vertikální čáry mezi každým řádkem naší tabulky:
tr {
spodní část: solidní 1px černá;
}}
Chcete-li odstranit okraj ze spodní části tabulky, přidáte do této značky ještě jednu třídu:
class = "no-border">
Přidejte do stylu list stylu:
.žádná hranice {
hraniční dno: žádné;
}}
Jak přidat řádky mezi konkrétní sloupce nebo řádky v tabulce
Pokud chcete pouze řádky mezi určitými řádky nebo sloupci, je třeba v těchto buňkách nebo řádcích použít třídu. Přidání řádku mezi sloupci je o něco těžší než mezi řádky, protože musíte přidat třídu do každé buňky v tomto sloupci. Pokud je váš stůl automaticky generován z CMS nějakého druhu , nemusí to být možné, ale pokud ručně kódujete stránku, můžete přidat příslušné třídy podle potřeby pro dosažení tohoto efektu.
class = "side-border">
Přidávání řádků mezi řádky je mnohem jednodušší, protože můžete přidat třídu do řádku, na který chcete linku zapnout.
class = "border-bottom">
Potom přidejte CSS do vašeho stylu:
.border-side {
okraj-levá: solidní 1px černá;
}}
.border-bottom {
spodní část: solidní 1px černá;
}}
Jak přidat řádky kolem jednotlivých buněk v tabulce
Chcete-li přidat řádek kolem jednotlivých buněk, přidejte třídu do buněk, ve kterých chcete okraj:
class = "border">
A potom přidejte do listu stylů následující CSS:
.okraj {
hranice: solid 1px černá;
}}
Jak přidat řádky uvnitř jednotlivých buněk v tabulce
Chcete-li přidat čáry do obsahu buňky, nejjednodušší způsob, jak to provést, je horizontální značka pravidlo (
).
Užitečné tipy
Pokud zjistíte mezery v hranicích, měli byste se ujistit, že ve vašem stole je nastaven styl sbližování okrajů. Přidejte do svého stylu listu následující:
stůl {
hranice-sbalit: sbalit;
}}
Můžete se vyhnout všem výše uvedeným CSS a použít atribut hranice v tabulkovém štítku. Uvědomte si však, že jeho atribut, i když není zastaralý, je výrazně méně flexibilní než CSS, protože můžete definovat pouze šířku hranice a může mít pouze kolem všech buněk tabulky nebo nikoli.