Talán hallottad, hogy a CSS és a HTML táblák nem keverednek össze. Nem ez a helyzet. Igen, a HTML-táblázatok elrendezéssel történő használata már nem a webes formatervezés legjobb gyakorlata, mert a CSS-elrendezési stílusok helyettesítik őket, de a táblák még mindig a helyes jelölés, amellyel táblázatos adatokat adhatnak hozzá egy weboldalhoz.
Mivel annyi webszakember szakad el a tábláktól, gondolván, hogy nem csak baj, sok ilyen szakembernek kevés tapasztalata van ezzel a közös HTML elemével, és küzd, ha belső vonalakat kell hozzáadniuk a weboldalakhoz tartozó cellá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ével vonalakat lehet hozzáadni az egyes cellákon belül.
Az útmutatóban leírt stílusok alkalmazásához asztalra van szüksége egy weboldalon. Ezután létrehoz egy stíluslapot belső stíluslapként a dokumentum fejlécében (ha csak egy oldallal foglalkozik), vagy külső dokumentumként csatolva a dokumentumhoz (ha több oldalt is tartalmaz). A stílusokat a stíluslapon belül belső vonalak hozzáadásával helyezi el.
Mielőtt elkezded
Döntse el, hol szeretné a sorok megjelenését a táblázatban. Több lehetősége van, többek között:
- Körül az összes sejt, hogy rácsot képezzen
- A vonalak elhelyezése az oszlopok között
- Csak a sorok között
- 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ő cellák körül vonalakat adjon hozzá, hozzon létre egy rácshatást, adja hozzá az alábbiakat a stíluslapjához:
td, th {határ: szilárd 1px fekete;} Ha oszlopokat szeretne hozzáadni az oszlopok között függőleges sorok létrehozásához, amelyek felülről lefelé futnak az oszlop oszlopaiban, akkor a stíluslaphoz adja hozzá a következőket: td, th {határ-bal: szilárd 1px fekete;} Ha nem szeretné, hogy függőleges vonalak jelennek meg az első oszlopban, hozzáadni egy osztályt th és td sejtekben. Ebben a példában vegye fel a következő osztályt: Nincs határ azon a cellákon, és egy CSS szabály segítségével távolítsa el a határt. A használt HTML-osztály: class = "no-határ"> Ezután adja hozzá a következő stílust a stíluslaphoz: .Nincs határ {border-left: nincs;} Az oszlopok közötti sorok hozzáadásához horizontális sorokat is hozzáadhat a stíluslapokhoz hozzáadott egy egyszerű stílushoz tartozó sorok között, az alábbiak szerint: tr {határ-alsó: szilárd 1px fekete;} A táblázat alsó részén levő határ eltávolításához újra hozzá kell adnia egy osztályt címke: class = "no-határ"> Adja hozzá a következő stílust a stíluslapjához: .Nincs határ {border-bottom: nincs;} 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 egyszerűbb, mivel hozzáadhatja az osztályt a sorhoz, 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;} 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-t a stíluslapjához: .border {határ: szilárd 1px fekete;} Ha vonalakat szeretne hozzáadni a cella tartalmához, a legegyszerűbb mód a horizontális szabálycímke (). Ha hiányosságokat észlel a határain, győződjön meg arról, hogy a szegély-összeomlási stílus az asztalon van beállítva. Adja hozzá az alábbiakat a stíluslapjához: asztal {határ-összeomlás: összeomlás;} Elkerülheti az összeset, és felhasználhatja a határértéket a táblázatcímkéjében. Felismerje azonban, hogy ez az attribútum, 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, vagy sem. Hogyan adhatunk sorokat az oszlopok között egy táblázatban?
Hogyan adhatunk sorokat a táblázatban lévő sorok között?
Hogyan adhatunk hozzá sorokat egy adott oszlop vagy sorok között egy táblázatban
Hogyan adhatunk hozzá egy táblázatban az egyéni sejtek körüli vonalakat?
Hogyan adhatunk hozzá sorokat az egyes cellákban a táblázatban?
Hasznos tippek
