Opi luomaan CSS-taulukkoriviä vain viidessä minuutissa
Olet ehkä kuulleet, että CSS- ja HTML-taulukot eivät sekoitu. Tämä ei yksinkertaisesti ole totta. Kyllä, ulkoasun HTML- taulukoiden käyttäminen ei ole enää verkkosuunnittelun paras käytäntö, joka on korvattu CSS-ulkoasuilla, mutta taulukot ovat edelleen oikea merkintä, jota käytetään taulukon tietojen lisäämiseen verkkosivulle.
Valitettavasti siksi, että niin monet web-ammattilaiset ovat kääntyneet poispäin taulukoista, jotka ajattelevat, että ne ovat myrkkyjä, monet näistä ammattilaisista ovat vähän kokemusta tämän yhteisen HTML-elementin kanssa ja taistelu, kun he joutuvat käsittelemään niitä verkkosivulla. Jos esimerkiksi sinulla on taulukko sivulla ja haluat lisätä sisäisiä viivoja taulukon soluihin.
CSS-taulukkorajat
Kun käytät CSS : ää reunojen lisäämiseen taulukoihin, se lisää vain reunan ulkopuolisen taulukon. Jos haluat lisätä sisäisen rivin kyseisen taulukon yksittäisiin soluihin, sinun on lisättävä reunoja sisäisiin CSS-elementteihin. Voit myös lisätä HR-tunnisteen rivien lisäämiseen yksittäisten solujen sisään.
Jotta tässä artikkelissa käsiteltyjä tyylejä voidaan soveltaa, sinulla on tietenkin oltava taulukko verkkosivustossasi. Tämän jälkeen luodaan tyyppikuvaksi sisäinen tyyliarkki dokumentin päähän (todennäköisesti vain, jos sivustosi on yksittäinen sivu) tai liitetty asiakirjaan ulkoisena tyyliarkkina (tämä on se, mitä olet tekee, jos sivustosi on useita sivuja - jolloin voit muotoilla kaikki sivut yhdestä ulkoisesta arkistosta). Voit laittaa tyylejä lisäämään sisäviivat kyseiseen tyyliarkiin.
Ennen kuin aloitat
Ensin sinun on päätettävä, mistä haluat rivien näkyvän taulukossa. Sinulla on useita vaihtoehtoja, kuten:
- Ympäröivät kaikki solut muodostamaan ruudukon;
- Rivien sijoittaminen vain sarakkeiden väliin;
- Vain rivien välissä; tai
- Tiettyjen sarakkeiden tai rivien välillä.
Voit myös sijoittaa rivit yksittäisten solujen ympärille tai yksittäisten solujen sisään.
Miten lisätä rivit kaikkiin soluihin taulukossa
Lisää rivit kaikkiin soluihin taulukon ympärille ja luo tämä ristikkomainen vaikutus lisäämällä tyyliisi seuraava:
td, th {
raja: kiinteä 1px musta;
}
Miten lisätä rivit vain sarakkeiden välillä taulukossa
Jos haluat lisätä rivit sarakkeiden väliin (tämä luo pystysuorat viivat, jotka kulkevat ylhäältä alas pöydän sarakkeisiin), lisää tyyliarkki seuraavasti:
td, th {
raja-vasen: kiinteä 1px musta;
}
Jos et halua niiden näkyvän ensimmäisessä sarakkeessa, sinun on lisättävä luokka kyseisille th- ja td- soluille. Tässä esimerkissä oletamme, että näillä soluilla on rajat ylittävä luokka ja poistamme rajan tämän tarkemman CSS-säännön avulla. Joten tässä on HTML-luokka, jota käytämme:
class = "no ylittävää">
Ja sitten voisimme lisätä tyyliin seuraava tyyli:
.no-border {
raja-vasen: ei yhtään;
}
Kuinka lisätä rivit rivien välissä taulukossa
Kuten rivien lisäämiseen sarakkeiden välillä, voit tehdä sen vain yhdellä yksinkertaisella tyylillä, joka lisätään tyyliarkkiisi. Alla oleva CSS lisää pystysuorat rivit jokaisen taulukon rivin väliin:
tr {
raja-pohja: kiinteä 1px musta;
}
Ja poistamalla raja taulukon alalaidasta, lisäät vielä luokkaan tuon tr-tunnisteen:
class = "no ylittävää">
Lisää tyyliin seuraava tyyli:
.no-border {
raja-pohja: ei yhtään;
}
Kuinka lisätä rivit tiettyjen sarakkeiden tai rivien välillä taulukossa
Jos haluat vain rivien tai sarakkeiden välisiä rivejä, sinun on käytettävä luokkia kyseisissä soluissa tai riveissä. Rivien lisääminen sarakkeiden välillä on hieman vaikeampaa kuin rivien välillä, koska sinun on lisättävä luokka jokaiseen sarakkeeseen. Jos taulukko luodaan automaattisesti jonkinasteisesta CMS: stä , tämä ei välttämättä ole mahdollista, mutta jos käsittelät sivua käsin, voit lisätä tarvittavat luokitukset tämän vaikutuksen saavuttamiseksi.
class = "puoli-border">
Rivien lisääminen rivien välillä on paljon helpompaa, koska voit lisätä luokan riviin, jota haluat linjan mukaan.
class = "border-bottom">
Lisää sitten CSS tyylialustasi:
reunuspuoli {
raja-vasen: kiinteä 1px musta;
}
.border-bottom {
raja-pohja: kiinteä 1px musta;
}
Miten lisätä rivit yksittäisten solujen sisällä taulukkoon
Jos haluat lisätä rivit yksittäisten solujen ympärille, lisäät luokka soluihin, jotka haluat rajan ympärille:
class = "border">
Ja lisää sitten seuraava CSS tyyliasiakirjaan:
.border {
raja: kiinteä 1px musta;
}
Miten lisätä rivit yksilöllisiin soluihin taulukossa
Jos haluat lisätä rivit solun sisällön alle, helpoin tapa tehdä tämä on vaakasuoralla sääntömerkillä (
).
Hyödyllisiä vinkkejä
Jos havaitset puutteita rajoillasi, varmista, että raja-romahtaminen -tyyli on asetettu pöydälle. Lisää tyyliarkkiasi seuraavaa:
pöytä {
raja-romahdus: romahtaa;
}
Voit välttää kaiken edellä mainitun CSS: n ja käyttää taulukkootsikon raja-määritteen. Ymmärrä kuitenkin, että hänen attribuutinsa, vaikka sitä ei ole hylätty, on huomattavasti vähemmän joustava kuin CSS, sillä vain rajan leveys voidaan määritellä ja se voi olla vain taulukon kaikkien solujen ympärillä tai ei lainkaan.