{"id":226338,"date":"2022-08-29T15:24:00","date_gmt":"2022-08-29T12:24:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226338"},"modified":"2022-11-08T03:41:06","modified_gmt":"2022-11-08T00:41:06","slug":"tabeli-tsentreerimine-css-iga-kiirjuhend","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/tabeli-tsentreerimine-css-iga-kiirjuhend\/","title":{"rendered":"Tabeli tsentreerimine CSS-iga (kiirjuhend)"},"content":{"rendered":"\n<p>Tabelite kasutamisel veebidisainis on huvitav ajalugu. Enne CSS-i kasutuselev\u00f5ttu ei kasutatud tabeleid ainult tabeliandmete kuvamiseks tavap\u00e4rasel viisil, vaid neid kasutati sagedamini lehe t\u00e4ielike paigutuste juhtimiseks.<\/p>\n<p>Toona kasutati <a href=\"https:\/\/wpdatatables.com\/html-tables\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HTML-tabeleid<\/a> nii veebilehtede struktuuri kui ka visuaalse v\u00e4limuse defineerimiseks, kus tabeli asetust sai m\u00e4\u00e4rata otse HTML-is. N\u00e4iteks tabeli keskele joondamise seadmiseks v\u00f5iks lihtsalt kirjutada:<\/p>\n<pre><code>&lt;table align=\"center\"&gt;<\/code><\/pre>\n<p>Kuid tabelite sel viisil joondamine ei ole enam \u00f5ige ja HTML5-s on selle tugi aegunud. Seda seet\u00f5ttu, et t\u00e4nap\u00e4evased veebistandardid dikteerivad struktuuri (HTML) ja stiili (CSS) eraldamist ning \u00fclaltoodud meetod rikub seda p\u00f5him\u00f5tet.<\/p>\n<p>HTML-i ei tohi kunagi kasutada elemendi kuvamisviisi m\u00e4\u00e4ramiseks; see on n\u00fc\u00fcd CSS-i \u00fclesanne. Niisiis, milline on \u00f5ige viis <a href=\"https:\/\/wordpress.mediadoma.com\/et\/css-tabelid-ja-nende-kood-mida-saate-kasutada\/\" title=\"tabeli tsentreerimiseks CSS-is?\">tabeli tsentreerimiseks CSS-is?<\/a> Selles artiklis, mille koostas meie wpDataTablesi meeskond, k\u00e4sitleme seda k\u00fcsimust ja n\u00e4itame teile m\u00f5nda n\u00e4pun\u00e4idet, kuidas tabeleid \u00f5igesti joondada.<\/p>\n<p>Arvestades, et oleme loonud suurep\u00e4rase <a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi tabelipistikprogrammi<\/a>, teame tabelitest \u00fcht-teist, nii et sukeldume sisse.<\/p>\n<h3>Kuidas saan tabeli tsentreerimiseks kasutada CSS-i?<\/h3>\n<p>CSS m\u00e4\u00e4rab lehe v\u00e4limuse, v\u00f5imaldades teil kontrollida iga elemendi v\u00e4limust ja paigutust, sealhulgas tabelielementi ja k\u00f5iki selle alamelemente, nagu th, tr ja td.<\/p>\n<p>K\u00f5igepealt k\u00e4sitleme tabeli CSS-i abil tsentreerimise \u00f5iget viisi. Kui teie parem ja vasak veeris on v\u00f5rdse v\u00e4\u00e4rtusega, peaksid kaasaegsed brauserid n\u00e4itama tabelit keskel. Lihtne viis selle saavutamiseks on seada m\u00f5lemad veerised automaatseks.<\/p>\n<p>Allpool on n\u00e4ide selle kohta, kuidas seda CSS-is kirjutada:<\/p>\n<pre><code>table<\/code><\/pre>\n<p>Pange t\u00e4hele, et te ei saa tabelit lihtsalt tsentreerida samamoodi nagu teksti puhul \u2013 nt kasutades &quot;text-align: center&quot;. Selle p\u00f5hjuseks on asjaolu, et tabeli element on plokitaseme element, mitte tekstisisene element. &quot;text -align: center&quot; tsentreerib ainult tekstisisese sisu, n\u00e4iteks tabeli teksti, mitte tabeli enda.<\/p>\n<p>Internet Exploreri vanemate versioonide puhul on aga viga, mille puhul plokitaseme elemente k\u00e4sitletakse tekstisiseste elementidena. Seega on ainus viis tabeli tsentreerimiseks, et t\u00f6\u00f6tada m\u00f5ne IE versiooniga, m\u00e4\u00e4rata tabeli emaelemendile selges\u00f5naliselt &quot;text-align: center&quot; (nt kehaelement, nagu allpool n\u00e4idatud):<\/p>\n<pre><code>body {<\/code><\/pre>\n<p>Saate testida, kuidas erinevad brauserid erinevate stiilidega k\u00e4ituvad, kasutades kas &quot;margin-left: auto; margin-right: auto&#8221; v\u00f5i &#8220;text-align: center&#8221;.<\/p>\n<p>Vaatame, kuidas tabelit nii kaasaegsetes kui ka vanemates brauserites tsentreerida, et see \u00f5ige v\u00e4lja n\u00e4eks.<\/p>\n<p>N\u00e4idetel on j\u00e4rgmine \u00fcldine vorming:<\/p>\n<pre><code>&lt;div&gt;\n\n&lt;table&gt;\n\n&lt;\/table&gt;\n\n&lt;\/div&gt;<\/code><\/pre>\n<p>Stiile rakendatakse m\u00f5lemale<\/p>\n<p>,<\/p>\n<p>v\u00f5i m\u00f5nikord m\u00f5lemat.<\/p>\n<p>Stiililehe jaotis, millega veeriste m\u00e4\u00e4rame, on j\u00e4rgmine:<\/p>\n<pre><code>.center1<\/code><\/pre>\n<p>See n\u00e4ide t\u00f6\u00f6tab h\u00e4sti ka uuemates brauserites. See t\u00f6\u00f6tab ka enamiku vanemate brauserite puhul. Kui olete selle meetodi kasutanud, avage see erinevates brauserites, et kontrollida, kuidas see v\u00e4lja n\u00e4eb.<\/p>\n<p>CSS vanematele ja uuematele brauseritele koos:<\/p>\n<pre><code>.centertbl<\/code><\/pre>\n<p>Kuidas see t\u00f6\u00f6tab?Esimene osa lisatakse<\/p>\n<p>. See tsentreerib tabeli Internet Explorer 5-s ja Netscape 4-s. Teine osa rakendatakse<\/p>\n<p>jooksul a<\/p>\n<p>.<\/p>\n<p>Veeriste seaded v\u00f5imaldavad teil CSS-iga h\u00e4sti toimivates brauserites tabeli keskpunkti panna. Seej\u00e4rel asetatakse tekstisisene tekst tagasi vaikimisi vasakule joondusele, alistades vanema brauseri toe jaoks esialgse teksti joonduse: keskel.<\/p>\n<h3>Kuidas veerisega tsentreerida<\/h3>\n<p>\u00dcks levinumaid viise tabeli tsentreerimiseks on seada nii alumine kui ka \u00fclemine veeris v\u00e4\u00e4rtusele 0 ning vasak ja parem veeris automaatseks.<\/p>\n<p>Siin on tavaliselt kasutatav meetod:<\/p>\n<pre><code>table {<\/code><\/pre>\n<p>V\u00f5i saate seda teha j\u00e4rgmiselt:<\/p>\n<pre><code>table {<\/code><\/pre>\n<p>Kui otsite t\u00e4pse laiusega tabelit, v\u00f5ite seda teha nagu tavaliselt ja automaatne veeris jagab \u00fclej\u00e4\u00e4va ruumi.<\/p>\n<pre><code>table {<\/code><\/pre>\n<p>Teine v\u00f5imalus seda teha on kasutada laiuse m\u00e4\u00e4ramiseks protsentides:<\/p>\n<pre><code>table {<\/code><\/pre>\n<h3>Lahtrite joondamine: teksti joondus vs vertikaaljoondus<\/h3>\n<p>Kui soovite teada, kuidas CSS-is teksti tsentreerida, on lahtris teksti joondamiseks kaks osa. horisontaalselt ja vertikaalselt. Horisontaalselt n\u00e4itab, kas tekst joondub selle lahtri keskele, vasakule v\u00f5i paremale. Seda juhib atribuut text-align.<\/p>\n<p>Vertikaalselt on see, kas see asub lahtri keskel, \u00fclaosas v\u00f5i all. Seda juhib vertikaalse joondamise atribuut.<\/p>\n<p>Rakendate TH- v\u00f5i TD-elemendile alltoodud atribuudid, et teie tekst oleks vertikaalselt ja horisontaalselt joondatud, nagu soovite. N\u00e4iteks:<\/p>\n<pre><code>td {\ntext-align: center;\nvertical-align: top;\n}<\/code><\/pre>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-201255-61e8be3d0713d.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-201255-61e8be3d0713d.jpg\" alt=\"Tabeli tsentreerimine CSS-iga (kiirjuhend)\" ><\/a><\/p>\n<p>Teksti \u00f5igustamine viitab t\u00fchikute lisamisele k\u00f5igi s\u00f5nade vahele, kuni need sobivad ideaalselt real vaba ruumiga. Viimane rida ei \u00f5igusta.<\/p>\n<h3>N\u00f5uanded laua kujundamiseks<\/h3>\n<p>Enne l\u00f5petamist arvasime, et v\u00f5ib olla kasulik omada teile viidata kiirn\u00f5uannete loendit. Need aitavad <a href=\"https:\/\/wordpress.mediadoma.com\/et\/css-i-ja-html-i-voi-wordpressiga-reageerivad-tabelid\/\" title=\"CSS-is tabeli tegemisel.\">CSS-is tabeli tegemisel.<\/a><\/p>\n<ul>\n<li>Joondage oma<\/li>\n<\/ul>\n<p>,<\/p>\n<p>, ja<\/p>\n<p>. See annab teile ka rohkem osi, kus saate CSS-i rakendada. See muudab mitme stiili kihistamise lihtsamaks.<\/p>\n<ul>\n<li>Tabelipaigutuse kasutamine v\u00f5imaldab teil <a href=\"https:\/\/wpdatatables.com\/documentation\/table-features\/table-layout-and-word-wrap\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">veergude<\/a> laiuse h\u00f5lpsamini m\u00e4\u00e4rata. Kui m\u00e4\u00e4rate pealkirja laiuse, j\u00e4\u00e4b veeru laius samaks.<\/li>\n<li>Kasutage vahelduvaid v\u00e4rve, et tabelit oleks lihtsam lugeda. Kiirel skannimisel n\u00e4ete, milline teave on samal real.<\/li>\n<li>Hoidke oma laud lihtsana. Saate kasutada protsente, nii et te ei pea iga kord suurust muutma.<\/li>\n<li>Saate kasutada \u00e4\u00e4riste kokkupanemist, et muuta laud puhtamaks ja korralikumaks.<\/li>\n<\/ul>\n<h3>L\u00f5petavad m\u00f5tted laua tsentreerimiseks<\/h3>\n<p>N\u00fc\u00fcd teate, kuidas tabelit CSS-i abil tsentreerida. Nagu arutatud, on \u201e\u00f5ige&#8221; viis seda teha nii parema kui ka vasaku veerise automaatseks seadmine. See meetod t\u00f6\u00f6tab peaaegu k\u00f5igi uute brauserite jaoks, mis t\u00f6\u00f6tavad h\u00e4sti CSS-iga.<\/p>\n<p>M\u00f5ne v\u00e4hem kaasaegse brauseri puhul see ei t\u00f6\u00f6ta. Kui see on nii, saate tabeli stiilida kasutada teksti joondamise meetodil ja \u00fcmbritseda selle tekstiga<\/p>\n<p>. Kui soovite tabeli keskele joondada, kasutades teksti v\u00e4ljapoole joondamist<\/p>\n<table>\n<tbody>\n<tr>\n<td><span><span>ja<\/span><\/span><\/td>\n<th><span><span>tekst, kasutades teksti joondust. <\/span><span>See muudab selle korralikumaks ja h\u00f5lpsamini loetavaks.<\/span><\/span><\/p>\n<li><span><span>Laua jagamiseks m\u00f5istlikeks osadeks v\u00f5ite kasutada<\/span><\/span><\/li>\n<\/th>\n<\/tr>\n<\/tbody>\n<tfoot><\/tfoot>\n<tbody><\/tbody>\n<thead><\/thead>\n<\/table>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpdatatables.com\" class=\"external external_icon\">wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u00fc\u00fcd teate, kuidas tabelit CSS-i abil tsentreerida. Nagu arutatud, on \u201e\u00f5ige\u201d viis seda teha nii parema kui ka vasaku veerise automaatseks seadmine.<\/p>\n","protected":false},"author":1,"featured_media":201256,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[905,842,863],"tags":[1165],"class_list":["post-226338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-4","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/226338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=226338"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/226338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/201256"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=226338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=226338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=226338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}