{"id":226790,"date":"2022-08-29T15:28:00","date_gmt":"2022-08-29T12:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226790"},"modified":"2022-11-08T09:15:13","modified_gmt":"2022-11-08T06:15:13","slug":"taulukon-keskittaeminen-css-llae-pikaopas","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/taulukon-keskittaeminen-css-llae-pikaopas\/","title":{"rendered":"Taulukon keskitt\u00e4minen CSS:ll\u00e4 (pikaopas)"},"content":{"rendered":"\n

Taulukoiden k\u00e4yt\u00f6ll\u00e4 web-suunnittelussa on mielenkiintoinen historia. Ennen CSS:n k\u00e4ytt\u00f6\u00f6nottoa taulukoita ei k\u00e4ytetty vain taulukkotietojen n\u00e4ytt\u00e4miseen tavanomaisella tavalla, vaan niit\u00e4 k\u00e4ytettiin sen sijaan yleisemmin kokonaisten sivuasettelujen ohjaamiseen.<\/p>\n

Tuolloin HTML-taulukoita<\/a> k\u00e4ytettiin m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n sek\u00e4 verkkosivujen rakennetta ett\u00e4 visuaalista ulkoasua, jolloin taulukon sijainti voitiin m\u00e4\u00e4ritt\u00e4\u00e4 suoraan HTML:ss\u00e4. Jos esimerkiksi haluat asettaa taulukon kohdistuksen keskelle, voit kirjoittaa:<\/p>\n

<table align=\"center\"><\/code><\/pre>\n
Taulukoiden kohdistaminen t\u00e4ll\u00e4 tavalla ei kuitenkaan ole en\u00e4\u00e4 oikein, ja se on vanhentunut HTML5:ss\u00e4. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 nykyaikaiset verkkostandardit sanelevat rakenteen (HTML) ja tyylin (CSS) erottamisen, ja yll\u00e4 oleva menetelm\u00e4 rikkoo t\u00e4t\u00e4 periaatetta.<\/p>\n
HTML-koodia ei saa koskaan k\u00e4ytt\u00e4\u00e4 elementin ulkoasun m\u00e4\u00e4ritt\u00e4miseen. se on nyt CSS:n teht\u00e4v\u00e4. Joten mik\u00e4 on oikea tapa keskitt\u00e4\u00e4 taulukko CSS:ss\u00e4?<\/a> T\u00e4ss\u00e4 wpDataTables-tiimimme artikkelissa k\u00e4sittelemme t\u00e4t\u00e4 kysymyst\u00e4 ja n\u00e4yt\u00e4mme sinulle muutamia vinkkej\u00e4 taulukoiden kohdistamiseen oikein.<\/p>\n
Tied\u00e4mme muutaman asian taulukoista, koska olemme luoneet mahtavan WordPress-taulukkolaajennuksen<\/a>, joten sukeltakaamme asiaan.<\/p>\n
Kuinka voin keskitt\u00e4\u00e4 taulukon CSS:n avulla?<\/h3>\n
CSS m\u00e4\u00e4ritt\u00e4\u00e4 sivun ulkoasun, jolloin voit hallita jokaisen elementin ulkoasua ja sijaintia, mukaan lukien taulukkoelementti ja kaikki sen alielementit, kuten th, tr ja td.<\/p>\n
Ensinn\u00e4kin k\u00e4yd\u00e4\u00e4n l\u00e4pi "oikea" tapa keskitt\u00e4\u00e4 taulukko CSS:n avulla. Jos oikea ja vasen marginaali ovat samanarvoisia, nykyaikaisten selaimien tulisi n\u00e4ytt\u00e4\u00e4 taulukko keskell\u00e4. Helppo tapa saavuttaa t\u00e4m\u00e4 on asettaa molemmat marginaalit automaattisiksi.<\/p>\n
Alla on esimerkki t\u00e4m\u00e4n kirjoittamisesta CSS:ss\u00e4:<\/p>\n
table<\/code><\/pre>\n
Huomaa, ett\u00e4 et voi vain keskitt\u00e4\u00e4 taulukkoa samalla tavalla kuin tekstin kanssa – .esim. k\u00e4ytt\u00e4m\u00e4ll\u00e4 "text-align: center". T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 taulukkoelementti on lohkotason elementti, toisin kuin sis\u00e4inen elementti. "text -align: center" keskitt\u00e4\u00e4 vain rivin sis\u00e4isen sis\u00e4ll\u00f6n, kuten taulukon tekstin, eik\u00e4 itse taulukkoa.<\/p>\n
Vanhemmissa Internet Explorerin versioissa on kuitenkin virhe, jossa lohkotason elementtej\u00e4 k\u00e4sitell\u00e4\u00e4n sis\u00e4isin\u00e4 elementtein\u00e4. N\u00e4in ollen ainoa tapa keskitt\u00e4\u00e4 taulukko toimimaan joidenkin IE-versioiden kanssa on asettaa "text-align: center" nimenomaisesti taulukon p\u00e4\u00e4elementtiin (esim. body-elementtiin alla esitetyll\u00e4 tavalla):<\/p>\n
body {<\/code><\/pre>\n
Voit testata kuinka eri selaimet k\u00e4ytt\u00e4ytyv\u00e4t eri tyyleill\u00e4 joko k\u00e4ytt\u00e4m\u00e4ll\u00e4 "margin-left: auto; margin-right: auto" tai "text-align: center".<\/p>\n
K\u00e4ymme l\u00e4pi, kuinka taulukko keskitet\u00e4\u00e4n sek\u00e4 nykyaikaisissa ett\u00e4 vanhemmissa selaimissa, jotta se n\u00e4ytt\u00e4\u00e4 oikealta.<\/p>\n
Esimerkeill\u00e4 on seuraava yleinen muoto:<\/p>\n
<div>\n\n<table>\n\n<\/table>\n\n<\/div><\/code><\/pre>\n
Tyylit sovelletaan kumpaankin<\/p>\n
,<\/p>\n
tai joskus molempia.<\/p>\n
Tyylisivuosio, jolla leikit\u00e4\u00e4n marginaalien asettamiseen, on:<\/p>\n
.center1<\/code><\/pre>\n
T\u00e4m\u00e4 esimerkki toimii hyvin uudemmissa selaimissa. Se toimii my\u00f6s useimmissa vanhemmissa selaimissa. Kun olet k\u00e4ytt\u00e4nyt t\u00e4t\u00e4 menetelm\u00e4\u00e4, avaa se eri selaimissa ja tarkista, milt\u00e4 se n\u00e4ytt\u00e4\u00e4.<\/p>\n
CSS vanhemmille selaimille ja uudemmille selaimille yhdess\u00e4:<\/p>\n
.centertbl<\/code><\/pre>\n
Miten se toimii? Ensimm\u00e4inen osa laitetaan<\/p>\n
. T\u00e4m\u00e4 keskitt\u00e4\u00e4 taulukon Internet Explorer 5:ss\u00e4 ja Netscape 4:ss\u00e4. Toinen osa otetaan k\u00e4ytt\u00f6\u00f6n<\/p>\n
sis\u00e4ll\u00e4 a<\/p>\n
.<\/p>\n
Reunusten asetusten avulla voit keskitt\u00e4\u00e4 taulukon selaimissa, jotka toimivat hyvin CSS:n kanssa. Sitten tekstin sis\u00e4inen teksti palautetaan oletusarvoiseen tasaukseen vasemmalle ohittaen alkuper\u00e4isen "tekstin tasaus: keskell\u00e4" vanhemman selaimen tuen.<\/p>\n
Kuinka keskitt\u00e4\u00e4 marginaalilla<\/h3>\n
Yksi yleisimmist\u00e4 tavoista keskitt\u00e4\u00e4 taulukko on asettaa sek\u00e4 ala- ett\u00e4 yl\u00e4marginaaliksi 0 ja vasemmaksi ja oikeaksi marginaaliksi automaattinen.<\/p>\n
T\u00e4ss\u00e4 on yleisesti k\u00e4ytetty menetelm\u00e4:<\/p>\n
table {<\/code><\/pre>\n
Tai voit tehd\u00e4 sen n\u00e4in:<\/p>\n
table {<\/code><\/pre>\n
Jos etsit taulukkoa, jonka leveys on tarkka, voit tehd\u00e4 t\u00e4m\u00e4n tavalliseen tapaan, jolloin automaattinen marginaali jakaa j\u00e4ljell\u00e4 olevan tilan.<\/p>\n
table {<\/code><\/pre>\n
Toinen tapa tehd\u00e4 se on k\u00e4ytt\u00e4\u00e4 prosenttilukuja leveyden m\u00e4\u00e4ritt\u00e4miseen:<\/p>\n
table {<\/code><\/pre>\n
Solujen tasaus: tekstin tasaus vs. pystytasaus<\/h3>\n
Jos haluat tiet\u00e4\u00e4 kuinka keskitt\u00e4\u00e4 teksti\u00e4 CSS:ss\u00e4, tekstin tasaamisessa solussa on kaksi osaa. vaaka- ja pystysuunnassa. Vaakasuuntainen tarkoittaa, tasataanko teksti solun keskelle, vasemmalle vai oikealle. T\u00e4t\u00e4 ohjaa tekstin tasausominaisuus.<\/p>\n
Pystysuoraan, onko se solun keskell\u00e4, yl\u00e4- vai alaosassa. T\u00e4t\u00e4 ohjaa vertikaalinen tasausominaisuus.<\/p>\n
K\u00e4yt\u00e4 alla olevia ominaisuuksia TH- tai TD-elementtiin, jotta tekstisi tasataan pysty- ja vaakasuunnassa haluamallasi tavalla. Esimerkiksi:<\/p>\n
td {\ntext-align: center;\nvertical-align: top;\n}<\/code><\/pre>\n
\"Taulukon<\/a><\/p>\n
Tekstin tasaaminen tarkoittaa v\u00e4lily\u00f6ntien lis\u00e4\u00e4mist\u00e4 kaikkien sanojen v\u00e4liin, kunnes ne sopivat t\u00e4ydellisesti rivill\u00e4 olevaan tilaan. Viimeinen rivi ei oikeuta.<\/p>\n
Vinkkej\u00e4 p\u00f6yd\u00e4n muotoiluun<\/h3>\n
Ennen kuin p\u00e4\u00e4timme, ajattelimme, ett\u00e4 voi olla hy\u00f6dyllist\u00e4 saada luettelo pikavinkeist\u00e4. N\u00e4m\u00e4 auttavat, kun teet taulukon CSS:ss\u00e4.<\/a><\/p>\n