Léiert wéi een eng CSS Dësch Grenz just eng fënnef Minutten ze kreéieren
Dir hutt gehofft, datt CSS an HTML Tabellen net mëschen. Dëst ass einfach net richteg. Jo, mat HTML- Tabellen fir den Layout ass net méi e bestëmmten Praxisboumaart ze benotzen, an d'Layoutstil vun CSS ersat ginn, awer Dëscher si nach ëmmer d'korrekt Markup, fir tabellaresch Daten op eng Websäit ze maachen.
Leider, well sou vill Websäiten aus Tabellen geliwwert sinn, datt se Gëft sinn, sinn vill vun dëse Professionneren e bëssen Erfahrung mat dësem gemeinsamen HTML Element an dem Kampf, wann se se op enger Websäit verhandelen mussen. Zum Beispill, wann Dir eng Tabelle op enger Säit hutt an Dir wëllt intern Banneren un d'Dëschzellen zufügen.
CSS Table Rands
Wann Dir CSS benotzt fir Grenzen op Dëschen ze addelen, fënnt et nëmmen d'Grenz ëm d'Äussert vum Dësch. Wann Dir intern Bunnen un d'Zellen vun deem Dësch kënnt addéiere wëllt, musst Dir Grenze bis un d'CSS-Elemente ofgeschloss ginn. Dir kënnt och de HR-Tag benotzen fir Zeilen an eenzel Zellen ze addéieren.
Fir dës Stile anzeschätzen, déi an dësem Artikel behandelt ginn, musst Dir natierlech e Tableau op Ärer Websäit. Dir musst dann e Stilblatt kreien wéi e internen Stilblatt am Kapp vun Ärem Dokument (Dir wäert Iech wahrscheinlech nëmme maachen wann Är "Site" eng Säit ass) oder am Dokument als äusserst Stëbsléck (dat ass wat Dir hutt maacht wann Äre Site méi Säiten ass - et erméiglecht Iech all d'Säiten aus engem externe Blatt ze stiléieren. Dir kënnt d'Stiler setzen fir d'Interieur Linnen an de Stylstick ze setzen.
Ier Dir Start
Als éischt musst Dir entscheeden, wou Dir wëllt d'Linnen an Ärem Dësch erscheinen. Dir hutt verschidde Méiglechkeeten, ënnert anerem:
- Ëmginn all d'Zellen, fir e Gitter ze bilden;
- D'Linn vun de Säiten tëschent nëmmen de Säulen léisst;
- Just tëschent den Reien; oder
- Tëschent spezifesch Säulen oder Zeilen.
Dir kënnt och d'Linn fir eenzel Zellen oder an eenzel Zellen positionéieren.
Wéi lued d'Linnen ëm all d'Zellen an enger Tab
Fir Zeilen ronderëm all Zellen an Ärem Dësch z'ënnerstëtzen, wéi Dir dat rasterfërmegt Effekt schécke kënnt Dir déi folgend Stofferbéi maachen:
td, th {
Grenz: fest 1px schwarz;
}}
Wéi Lines zwëschen nëmmen d'Spalten an enger Tab
Fir Zeilën tëschent de Kolonnën ze erofhuelen (dëst versteet vertikal Linnen, déi vun der Spëtzt bis ënnen op den Dëscher vum Dësch leeën), fügen d'folgend Saache fir Ären Stylblat:
td, th {
Grenz-lénks: massiv 1px schwaarzen;
}}
Dann, wann Dir se net wëllt datt se op der éischter Kolonn ersat ginn, musst Dir eng Klass an dës Th an Td Zellen hinzufügen . An dësem Beispill weisen mir datt mir eng Klasse vu grenziwwerschreidend Grenzregiounen hunn an eis Grenze mat dëser méi spezifescher CSS Regel spillen. Also hei ass d'HTML-Klass, déi mir benotze géifen:
class = "no-border">
A da musst de Stil fir folgend Styl ze addelen:
.no Grenz {
Grenz-lénks: keng;
}}
Wéi lued de Lines tëscht Just the Rows an enger Table
Esou wéi mat Linnen tëscht de Spalten, kënnt Dir dëst mat nëmmen engem einfachen Stil un Ären Stylstéck ginn. Dee méi CSS géif méi vertikale Linnen tëschent all Zeeche vun eiser Tabelle addéieren:
tr {
Grenzgrenz: solid 1px schwarz;
}}
A fir d'Grenz vun der Gréisst vum Dësch ze rauszefannen, da géifs nach eng Kéier eng Klass mat dësem Tr-Dag addéieren:
class = "no-border">
Setzt folgend Styl bei Ärem Stylblat:
.no Grenz {
Grenzgänger: keng;
}}
Wéi lued d'Linnen zwëschen spezifesche Spalten an Zeilen an enger Tabelle
Wann Dir nëmmen Zeilen tëschent spezifesche Reien oder Spalten wëllt hunn, musst Dir eng Klasse op dës Zellen oder Zeilen benotzen. Eng Zeil tëscht Spuenien ze addéieren ass méi schwéier wéi tëscht Reihen, well Dir de Klasse an all Zelle vun dëser Kolonn ass. Wann Är Tabelle automatesch aus engem CMS vun enger Aart generéiert gëtt , kann dat net méiglech sinn, awer wann Dir d'Säit d'Kodéierung vun der Säit ass, kënnt Dir passende Klassen upassen wéi néideg fir dësen Effekt ze erreechen.
class = "Side-border">
Zeilenlinnen tëschent Zeilen ginn et vill méi einfach, wéi Dir d'Klass nëmmen op d'Zeil setzen wëllt Dir wëllt d'Linn op.
class = "border-bottom">
Fuert dann den CSS op Är Stylblatt:
.ordereg Säit {
Grenz-lénks: massiv 1px schwaarzen;
}}
Border-Bottom {
Grenzgrenz: solid 1px schwarz;
}}
Wéi lued d'Lines ëm eenzel Zellen a enger Dësch
Fir Zeil um eenzel Zellen ze addéieren, addéiere mer eng Klasse op d'Zellen déi Dir wëllt eng Grenz ronderëm:
class = "border">
An dann fügen déi folgend CSS op Är Stylblatt:
.border {
Grenz: fest 1px schwarz;
}}
Wéi Lines Inside Individuell Zellen an enger Tab
Wann Dir Zeilen an den Inhalt vun enger Zelle léisst wëllt, gëtt et am einfachsten Wee mat der horizontalen Regelbezeechnung (
).
Nëtzlech Tipps
Wann Dir Wahllokaler an Äre Grenzen gesäit, musst Dir sécher datt de Grenzverloschtstil op Ärem Dësch gesat ass. Füügt d'folgend Saache fir Ären Stylblat:
Dësch {
Grenzfall: Zesummesetzung;
}}
Dir kënnt all d'CSSe vermeigen a benotzt d'Grenz-Attribut vun Ärem Table Tag. Awer realiséieren, datt säi Attribut, wa se net vergewëssert ass, wesentlech manner flexibel wéi CSS ass, wéi Dir nëmmen d'Breet vun der Grenz kann definéieren an et kann nëmme just ëm all Zelle vum Dësch oder keen.