Olet ehkä kuulleet, että CSS- ja HTML-taulukot eivät sekoitu. Tämä ei ole se tapaus. Kyllä, ulkoasun HTML-taulukoiden käyttäminen ei ole enää verkkosuunnittelun paras käytäntö, koska ne on korvattu CSS-ulkoasuilla, mutta taulukot ovat edelleen oikea merkintä, jota käytetään taulukon tietojen lisäämiseen verkkosivulle.
Koska niin monet web-ammattilaiset ajattelevat pöytiä ajattelematta, että he eivät ole mitään muuta kuin ongelmia, monet näistä ammattilaisista ovat vähän kokemusta tämän yhteisen HTML-elementin kanssa, ja he kamppailevat, kun heidän on lisättävä sisäisiä viivoja verkkosivuille.
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 lisätä HR-tunnisteen rivien lisäämiseen yksittäisten solujen sisään.
Jos haluat käyttää tässä oppitunnissa käsiteltyjä tyylejä, tarvitset taulukon verkkosivustossa. Tämän jälkeen luodaan tyyppikuvaksi sisäinen tyyliarkki asiakirjan päähän (jos sinulla on vain yksi sivu) tai liitetään asiakirjaan ulkoisena tyyliarkkina (jos sivustolla on useita sivuja). Teet tyylit lisäämällä sisustusviivat tyyliarkiin.
Ennen kuin aloitat
Päätä, mihin haluat rivien näkyvän taulukossa. Sinulla on useita vaihtoehtoja, kuten:
- Kaikki solut ympäröivät muodostamaan ruudukon
- Rivien sijoittaminen vain sarakkeiden väliin
- Vain rivien välissä
- 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
Voit lisätä viivoja kaikkien solujen ympärille taulukossa ja luoda verkkoefektin lisäämällä seuraavan tyyppisivun:
td, th {raja: kiinteä 1px musta;} Jos haluat lisätä sarakkeita sarakkeiden välillä pystysuorien viivojen luomiseksi, jotka kulkevat ylhäältä alas pöydän sarakkeisiin, lisää seuraavat tyylilaji: td, th {raja-vasen: kiinteä 1px musta;} Jos et halua pystyviivojen näkyvän ensimmäisessä sarakkeessa, lisäät luokan kohteeseen th ja td soluja. Tässä esimerkissä oletetaan luokan no ylittävää näiden solujen ja poistaa rajan CSS-sääntö. Käyttämäsi HTML-luokka on: class = "no ylittävää"> Lisää tyyliin seuraava tyyli: .no-border {raja-vasen: ei yhtään;} Kuten rivien lisäämiseen sarakkeiden välillä, voit lisätä rivien välisiä vaakaviivoja tyylilevyyn lisätyn yksinkertaisen tyylin avulla seuraavasti: tr {raja-pohja: kiinteä 1px musta;} Jos haluat poistaa rajan taulukon alalaidasta, lisäät siihen vielä luokan tag: class = "no ylittävää"> Lisää tyyliin seuraava tyyli: .no-border {raja-pohja: ei yhtään;} 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 helpompaa, koska voit lisätä luokan riviin, jota haluat linjan mukaan. class = "border-bottom"> Lisää sitten CSS tyylitaulukkoon: reunuspuoli {raja-vasen: kiinteä 1px musta;}.border-bottom {raja-pohja: kiinteä 1px musta;} Jos haluat lisätä rivit yksittäisten solujen ympärille, lisäät luokka soluihin, jotka haluat rajan ympärille: class = "border"> Lisää sitten seuraava CSS tyylitaulukkoon: .border {raja: kiinteä 1px musta;} Jos haluat lisätä rivit solun sisällön alle, helpoin tapa tehdä tämä on horisontaalisen säännön tunnisteen avulla (). Jos havaitset puutteita rajoillasi, varmista, että raja-romahtaminen on asetettu pöydälle. Lisää tyyliin lisää seuraavasti: pöytä {raja-romahdus: romahtaa;} Voit välttää kaikki ja käyttää rajamääritettä taulukkotunnistimessa. Ymmärrä kuitenkin, että tämä attribuutti, vaikka sitä ei ole vanhentunut, 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. Miten lisätä rivit vain sarakkeiden välillä taulukossa
Kuinka lisätä rivit rivien välissä taulukossa
Kuinka lisätä rivit tiettyjen sarakkeiden tai rivien välillä taulukossa
Miten lisätä rivit yksittäisten solujen sisällä taulukkoon
Miten lisätä rivit yksilöllisiin soluihin taulukossa
Hyödyllisiä vinkkejä
