{"id":228414,"date":"2022-10-07T18:21:00","date_gmt":"2022-10-07T15:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228414"},"modified":"2022-11-09T02:19:21","modified_gmt":"2022-11-08T23:19:21","slug":"solujen-yhdistaeminen-html-ssae-ja-wordpressissae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/solujen-yhdistaeminen-html-ssae-ja-wordpressissae\/","title":{"rendered":"Solujen yhdist\u00e4minen HTML:ss\u00e4 ja WordPressiss\u00e4"},"content":{"rendered":"\n

Tietotaulukko, jossa on monta solua vierekk\u00e4in, voi tuntua ahtaalta. Jotkut ihmiset eiv\u00e4t v\u00e4lit\u00e4 t\u00e4llaisesta tietojen esitt\u00e4misest\u00e4, kun taas toiset osaavat mieluummin yhdist\u00e4\u00e4 soluja HTML:ss\u00e4.<\/p>\n

Yhdist\u00e4m\u00e4ll\u00e4 soluja taulukossa voidaan esitt\u00e4\u00e4 monta dataa yhdess\u00e4 suuressa solussa. T\u00e4m\u00e4 prosessi johtaa usein siihen, ett\u00e4 suuri solu n\u00e4ytet\u00e4\u00e4n vaaka-, pysty- tai molemmissa useissa riveiss\u00e4 tai sarakkeissa.<\/p>\n

Kun taulukon solut kattavat useita rivej\u00e4, sit\u00e4 kutsutaan "riviv\u00e4liksi". Kun taulukon solut kattavat useita sarakkeita, sit\u00e4 kutsutaan "sarakev\u00e4liksi" tai "colspaniksi".<\/p>\n

T\u00e4m\u00e4 on p\u00e4\u00e4asiassa esitys- tai raportointitarkoituksiin, jotta laskentataulukosta tulee visuaalisesti houkutteleva. T\u00e4ss\u00e4 artikkelissa k\u00e4sitell\u00e4\u00e4n solujen yhdist\u00e4mist\u00e4 HTML:ss\u00e4 ja WordPress-ty\u00f6ymp\u00e4rist\u00f6ss\u00e4.<\/p>\n

Taulukon solujen yhdist\u00e4minen HTML:ss\u00e4<\/h2>\n

colspan-attribuutti voi yhdist\u00e4\u00e4 useita taulukon soluja sarakkeessa<\/p>\n

HTML-tunniste (taulukkotiedot). Kun yhdist\u00e4t useita rivisoluja, voidaan k\u00e4ytt\u00e4\u00e4 rowspan-attribuuttia. Molemmat m\u00e4\u00e4ritteet tulevat n\u00e4kyviin<\/p>\n

tag.<\/p>\n

Seuraavat esimerkit osoittavat, kuinka n\u00e4it\u00e4 m\u00e4\u00e4ritteit\u00e4 k\u00e4ytet\u00e4\u00e4n HTML:ss\u00e4 ja miten ne n\u00e4kyv\u00e4t selaimessa.<\/p>\n

Rowspan-attribuutin k\u00e4ytt\u00e4minen<\/h3>\n

T\u00e4m\u00e4 m\u00e4\u00e4rite m\u00e4\u00e4ritt\u00e4\u00e4, kuinka monta rivi\u00e4 yhdistetyn solun tulee ulottua pystysuunnassa. Se voi luoda suuren pystysuoran<\/strong> solun kahdesta tai useammasta solusta, jotka ovat samassa sarakkeessa, ja n\u00e4ytt\u00e4\u00e4 t\u00e4m\u00e4n sitten useilla riveill\u00e4.<\/p>\n

Esimerkiksi koodi<\/p>\n

yhdist\u00e4\u00e4 kaksi solua yhden suuren pystysuoraan sijoitetun solun luomiseksi.<\/p>\n

Esimerkki HTML-taulukkokoodista, joka k\u00e4ytt\u00e4\u00e4 riviv\u00e4li-attribuuttia<\/p>\n

Seuraava koodi on per\u00e4isin taulukosta, jossa on kolme saraketta ja kolme rivi\u00e4. Ensimm\u00e4isess\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 attribuuttia rowspan="2\u2033<\/p>\n

-tunniste luodaksesi yhden solun ensimm\u00e4isen sarakkeen kahdesta ensimm\u00e4isest\u00e4 solusta.<\/p>\n

Numero rowspan-attribuutissa m\u00e4\u00e4ritt\u00e4\u00e4 solujen lukum\u00e4\u00e4r\u00e4n, joita k\u00e4ytet\u00e4\u00e4n<\/p>\n

tag.<\/p>\n

Seuraavassa on esimerkki HTML-taulukon koodista, jossa on solu, joka ulottuu kahdelle riville. Ymm\u00e4rt\u00e4\u00e4ksesi paremmin, miten t\u00e4m\u00e4 koodi toimii, luo vapaasti visuaalinen render\u00f6inti selaimessa.<\/p>\n

<table>\n<\/code><\/pre>\n
\"Solujen<\/a><\/p>\n
T\u00e4m\u00e4n koodin render\u00f6iminen selaimessa luo taulukon, jossa on suuri solu, joka kattaa kahden rivin korkeuden. Riviv\u00e4lin arvon muuttaminen arvoon 3 saa ensimm\u00e4isen solun kattamaan kaikkien kolmen rivin korkeuden.<\/p>\n
\"Solujen<\/a><\/p>\n
Laajennettaessa a<\/p>\n
rivi muista poistaa<\/p>\n
tunnisteet muilta taulukon riveilt\u00e4 (<\/p>\n
). Kun ensimm\u00e4inen solu kattaa kaikki kolme rivi\u00e4, niit\u00e4 on vain kaksi<\/p>\n
tunnisteet kahdessa muussa<\/p>\n
tunnisteet.<\/p>\n
Colspan-attribuutin k\u00e4ytt\u00e4minen<\/h3>\n
T\u00e4m\u00e4 m\u00e4\u00e4rite m\u00e4\u00e4ritt\u00e4\u00e4 kuinka monta saraketta yhdistetty solu ulottuu vaakasuunnassa<\/strong>. Se luo suuren vaakasuuntaisen solun kahdesta tai useammasta solusta, jotka ovat samalla rivill\u00e4, ja sijoittaa sen sitten useisiin sarakkeisiin.<\/p>\n
Pohjimmiltaan colspan-attribuutti m\u00e4\u00e4ritt\u00e4\u00e4 suurella rivill\u00e4 n\u00e4ytett\u00e4vien sarakkeiden m\u00e4\u00e4r\u00e4n. Esimerkiksi HTML-koodi<\/p>\n
yhdist\u00e4\u00e4 kaksi solua ja luo yhden suuren vaakasuuntaisen solun.<\/p>\n
Kaksi HTML-taulukkokoodiesimerkki\u00e4, jotka k\u00e4ytt\u00e4v\u00e4t Colspan-attribuuttia<\/p>\n
Seuraava koodi on HTML-taulukko, jossa on suuri solu, joka ulottuu kahdelle sarakkeelle. Ymm\u00e4rt\u00e4\u00e4ksesi paremmin, miten t\u00e4m\u00e4 koodi toimii, luo vapaasti visuaalinen render\u00f6inti selaimessa.<\/p>\n
<table>\n<\/code><\/pre>\n
T\u00e4m\u00e4n koodin render\u00f6iminen selaimessa luo taulukon, jossa on suuri solu, joka kattaa kahden sarakkeen leveyden. Colspan-attribuutin arvon muuttaminen 3:ksi saa ensimm\u00e4isen solun kattamaan kaikkien kolmen sarakkeen leveyden.<\/p>\n
\"Solujen<\/a><\/p>\n
Kun kaikki 3 saraketta on ylitetty, niit\u00e4 saa olla vain yksi<\/p>\n
taulukon rivill\u00e4 (<\/p>\n
). Muista siis poistaa kaikki j\u00e4ljell\u00e4 olevat<\/p>\n
tunnisteet laajennettaessa a<\/p>\n
sarakkeessa.<\/p>\n
\"Solujen<\/a><\/p>\n
T\u00e4ss\u00e4 on toinen esimerkki HTML-taulukosta, jossa on solu, joka ulottuu kahden sarakkeen yli. Ymm\u00e4rt\u00e4\u00e4ksesi koodia paremmin, luo visuaalinen render\u00f6inti selaimessasi tietokoneesi muistion avulla.<\/p>\n
<table><\/code><\/pre>\n
Kuinka k\u00e4ytt\u00e4\u00e4 "0" (nolla) riviv\u00e4li- ja colspan-m\u00e4\u00e4ritteiss\u00e4<\/h3>\n
\"Solujen<\/a><\/p>\n
Nykyaikaisessa selaimessa colspan- ja riviv\u00e4liss\u00e4 k\u00e4ytettyn\u00e4 "0" tarkoittaa suurinta osaa sarakkeista tai riveist\u00e4. Voit esimerkiksi k\u00e4ytt\u00e4\u00e4 rivi\u00e4 rowspan=”0\u2033 pident\u00e4\u00e4ksesi rivi\u00e4 taulukon loppuun sen sijaan, ett\u00e4 taulukon rivit laskettaisiin yhteen.<\/p>\n
Miss\u00e4 taulukoissa nollaa kannattaa k\u00e4ytt\u00e4\u00e4? Numero nolla sopii erityisen hyvin dynaamisiin taulukoihin. Se sopii my\u00f6s suurille taulukoille, joissa sarakkeiden ja rivien m\u00e4\u00e4r\u00e4 muuttuu usein.<\/p>\n
Taulukon solujen yhdist\u00e4minen WordPressiss\u00e4 wpDataTables-laajennuksella<\/h2>\n
\"Solujen<\/a><\/p>\n
Voit k\u00e4ytt\u00e4\u00e4 HTML-koodia taulukoiden tekemiseen tekstiruudun kautta tai asentaa laajennuksia, jotka tarjoavat taulukkovaihtoehtoja visuaaliseen tekstikentt\u00e4\u00e4n. N\u00e4m\u00e4 vaihtoehdot toimivat helposti yksinkertaisissa p\u00f6ydiss\u00e4, mutta ne vaikeutuvat k\u00e4ytett\u00e4ess\u00e4 suurempia p\u00f6yti\u00e4.<\/p>\n
WordPress-laajennus wpDataTables<\/a> on t\u00e4ydellinen solujen yhdist\u00e4miseen suuremmissa taulukoissa. Se on my\u00f6s loistava t\u00e4m\u00e4n tyyppisten taulukoiden luomiseen, mukauttamiseen ja muokkaamiseen.<\/p>\n
Solujen yhdist\u00e4minen on helppoa wpDataTablesilla. Se voidaan tehd\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 solunhallintatilaa lataamalla laajennus ja aktivoimalla se. Jopa ilman kokemusta WordPress-laajennuksista, wpDataTablesin asentaminen on helppoa kenelle tahansa.<\/p>\n
wpDataTables-laajennuksen k\u00e4ytt\u00e4minen<\/h3>\n
\"Solujen<\/a><\/p>\n
Kun luot taulukkoa, valitse ensimm\u00e4inen vaihtoehto luettelosta ja napsauta sitten "Seuraava". Luo tietotaulukollesi nimi ja valitse haluamasi rivien ja sarakkeiden m\u00e4\u00e4r\u00e4. Napsauta "Luo taulukko" saadaksesi uuden tyhj\u00e4n taulukon.<\/p>\n
\"Solujen<\/a><\/p>\n
Voit valita yhden 17 p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4muodosta p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4sarakkeille ja interaktiivisille p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4valitsimille.<\/p>\n
\"Solujen<\/a><\/p>\n
wpDataTables-laajennus sis\u00e4lt\u00e4\u00e4 my\u00f6s integroidut skinit, joilla voit mukauttaa taulukon k\u00e4ytt\u00f6liittym\u00e4n visuaalisia ominaisuuksia. N\u00e4ihin skineihin kuuluvat:<\/p>\n