Tudja meg, hogyan hozhat létre CSS táblázati szegélyt mindössze öt perc alatt
Talán hallottad, hogy a CSS és a HTML táblák nem keverednek össze. Ez egyszerűen nem igaz. Igen, a HTML- táblázatok elrendezéssel történő használata nem a webes formatervezés legjobb gyakorlata, hanem a CSS-elrendezési stílusok váltotta fel őket, de a táblák még mindig a helyes jelölés, ha táblázatos adatokat szeretnének hozzáadni egy weboldalhoz.
Sajnos, mivel sok webszakember szakadt el az asztaloktól, úgy vélik, hogy mérgek, sok ilyen szakember kevés tapasztalattal rendelkezik ezzel a közös HTML elemével és a küzdelemmel, amikor egy weboldalon kell kezelniük. Például ha van egy táblázata egy oldalon, és belső sorokat szeretne hozzáadni az asztalcellákhoz.
CSS táblázat határok
Amikor a CSS segítségével határokat adhat a táblákhoz, akkor csak a tábla külső szegélyét adja hozzá. Ha belső táblákat szeretne hozzáadni az adott táblázat egyes celláihoz, hozzá kell adnia a belső CSS-elemeket. A HR címkét is használhatja az egyes cellákon belüli vonalak hozzáadására.
Annak érdekében, hogy alkalmazza a cikkben leírt stílusokat, nyilvánvalóan rendelkeznie kell egy táblázattal a weboldalán. Ezután létre kell hoznia egy stíluslapot mint belső stíluslapot a dokumentum fejlécében (valószínűleg csak akkor teheti meg ezt, ha a "webhely" egyetlen oldal) vagy a dokumentumhoz külső stíluslapként csatolva van (ez ha a webhely több oldalt tartalmaz - lehetővé teszi, hogy az összes oldalt egy külső lapból állítsa be). A stílust beillesztjük a stíluslapra.
Mielőtt elkezded
Először el kell döntenie, hogy hova szeretné megjeleníteni a sorokat a táblázatban. Több lehetősége van, többek között:
- Az összes sejt körül körülveszi a rácsot;
- A vonalak elhelyezése az oszlopok között;
- Csak a sorok között; vagy
- Különleges oszlopok vagy sorok között.
A vonalakat az egyes cellák körül vagy az egyes cellákon belül is elhelyezheti.
Hogyan adhatunk hozzá sorokat a táblázatban az összes cellához?
Ahhoz, hogy a táblázatban lévő összes cellához hozzá lehessen vonalakat létrehozni, ehhez a rácsszerű hatáshoz tegye a következőket a stíluslapjához:
td, th {
határ: szilárd 1px fekete;
}
Hogyan adhatunk sorokat az oszlopok között egy táblázatban?
Sorok hozzáadása az oszlopok között (ez létrehozza a táblázat oszlopaiból fentről lefelé futó függőleges vonalakat), adja hozzá a stíluslaphoz a következőket:
td, th {
határ-bal: szilárd 1px fekete;
}
Ezután, ha nem szeretné, hogy megjelenjenek az első oszlopban, akkor hozzá kell adnia egy osztályt a th és td cellákhoz. Ebben a példában azt feltételezzük, hogy az ilyen cellákon nincs határok nélküli osztály, és ezzel a specifikusabb CSS-szabálymal eltávolítjuk a határt. Tehát itt van a HTML osztály, amelyet használni fogunk:
class = "no-határ">
Ezután hozzáadhatnánk a következő stílust a stíluslapunkhoz:
.Nincs határ {
border-left: nincs;
}
Hogyan adhatunk sorokat a táblázatban lévő sorok között?
Mint az oszlopok közötti sorok hozzáadásához, ezt csak egy egyszerű stílus hozzáadásával teheti meg. Az alábbi CSS függőleges sorokat adna a táblázatunk minden sora között:
tr {
határ-alsó: szilárd 1px fekete;
}
És ha eltávolítani szeretné a határt az asztal aljától, ismét egy osztályt ad hozzá a tr címkéhez:
class = "no-határ">
Adja hozzá a következő stílust a stíluslapjához:
.Nincs határ {
border-bottom: nincs;
}
Hogyan adhatunk hozzá sorokat egy adott oszlop vagy sorok között egy táblázatban
Ha csak sorokat vagy oszlopokat szeretne vonalat igényelni, akkor egy osztályt kell használnia az adott cellákon vagy sorokban. Az oszlopok közötti sor hozzáadása némileg nehezebb, mint a sorok között, mivel az oszlopot hozzá kell adnia az oszlop minden cellájához. Ha a táblázatot automatikusan létrehozza valamilyen CMS-ből, előfordulhat , hogy ez nem lehetséges, de ha kézzel kódolod az oldalt, megfelelő osztályokat adhatsz ehhez a hatás eléréséhez.
class = „oldalán átnyúló”>
A sorok közötti sorok hozzáadása sokkal könnyebb, mivel csak felveheti az osztályt a sorra, amelyen a sor szerepel.
class = "border-bottom">
Ezután adja hozzá a CSS-t stíluslapjához:
határvonal {
határ-bal: szilárd 1px fekete;
}
.Border-bottom {
határ-alsó: szilárd 1px fekete;
}
Hogyan adhatunk hozzá egy táblázatban az egyéni sejtek körüli vonalakat?
Az egyes cellák körül vonalak hozzáadásához hozzáad egy osztályt a cellákhoz, amelyekre a szegélyt keresi:
class = "border">
Ezután adja hozzá a következő CSS-et stíluslapjához:
.border {
határ: szilárd 1px fekete;
}
Hogyan adhatunk hozzá sorokat az egyes cellákban a táblázatban?
Ha vonalakat szeretne hozzáadni a cella tartalmában, a legegyszerűbb módja a vízszintes szabály-címke (
).
Hasznos tippek
Ha hiányosságokat észlel a határain belül, győződjön meg róla, hogy a szegély-összeomlás stílusa a táblázatban van beállítva. Adja hozzá az alábbiakat a stíluslapjához:
asztal {
határ-összeomlás: összeomlás;
}
A fent említett CSS-eket elkerülheti, és a táblázatos címkéjén használhatja a határ-attribútumot. Érdemes azonban megérteni, hogy attribútuma, bár nem elavult, lényegesen kevésbé rugalmas, mint a CSS, mivel csak a szélesség szélességét határozhatja meg, és csak a táblázat összes celláján lehet, vagy sem.