{"id":479,"date":"2020-03-11T14:33:19","date_gmt":"2020-03-11T14:33:19","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=479"},"modified":"2020-03-11T15:45:38","modified_gmt":"2020-03-11T15:45:38","slug":"css-tabel","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/css-tabel\/","title":{"rendered":"Tabel"},"content":{"raw":"CSS v\u00f5imaldab m\u00e4\u00e4rata ka tabelite v\u00e4limust. Tabelite v\u00e4limust m\u00e4\u00e4ravad suuresti omadused, mis kasutusel ka teistel elementidel (taustav\u00e4rv, tekstiv\u00e4rv, raamjooned, polsterdus jms) kuid on kasutusel ka m\u00f5ned eriomadused.\r\n\r\nM\u00e4\u00e4rata, kuidas jaotatakse ruum tabeli lahtrite, ridade ja veergude vahel, selleks on omadus <em>table-layout<\/em>, mille v\u00e4\u00e4rtuseks on:\r\n<ul>\r\n \t<li><em>auto<\/em> \u2013 mille puhul tabeli veergude laius m\u00e4\u00e4ratakse sisu j\u00e4rgi, vaikev\u00e4\u00e4rtus;<\/li>\r\n \t<li><em>fixed<\/em> \u2013 mille korral kehtivad autori poolt m\u00e4\u00e4ratud lahtrite m\u00f5\u00f5dud;<\/li>\r\n \t<li><em>inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (parent);<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  table-layout: auto;\r\n}<\/pre>\r\n<h1>Tabeli raamjoonte seaded<\/h1>\r\nSaab m\u00e4\u00e4rata, kuidas n\u00e4idatakse raamjooni. Terve tabeli ja lahtrite jooned v\u00f5ivad olla kokkupandud (\u00fche joonena) v\u00f5i eraldi n\u00e4htavad.\r\n\r\nKasutatakse omadust <em>border-collapse<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>collapse<\/em> \u2013 tabeli ja lahtrite raamjooni n\u00e4idatakse koos, \u00fche joonena;<\/li>\r\n \t<li><em>separate<\/em> \u2013 tabeli ja lahtrite raamjooni n\u00e4idatakse eraldi;<\/li>\r\n \t<li><em>inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (<em>parent<\/em>);<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  border-collapse: collapse;\r\n}<\/pre>\r\n[caption id=\"attachment_482\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-482\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_2.png\" alt=\"Tabeli jooned koos (collapse)\" width=\"450\" height=\"178\" \/> Tabeli jooned koos (<em>collapse<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_481\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-481\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_1.png\" alt=\"6Tabeli jooned eraldi (separate)\" width=\"450\" height=\"199\" \/> Tabeli jooned eraldi (<em>separate<\/em>)[\/caption]\r\n\r\nKui kasutatakse v\u00e4\u00e4rtust \u201e<em>separate<\/em>\u201c, siis saab omadusega <em>border-spacing<\/em> m\u00e4\u00e4rata lahtrite ja tabeli raamjoonte omavahelist kaugust (px, em vms).\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  border-collapse: separate;\r\n  border-spacing: 10px\r\n}<\/pre>\r\n[caption id=\"attachment_484\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-484\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_3.png\" alt=\"Tabeli joonte omavaheline kaugus on suurendatud\" width=\"450\" height=\"251\" \/> Tabeli joonte omavaheline kaugus on suurendatud[\/caption]\r\n\r\nKasutades siin t\u00fchikuga eraldatult kahte v\u00e4\u00e4rtust, m\u00e4\u00e4rame erinevad kaugused vasaku\/parema ja \u00fclemise\/alumise k\u00fclje jaoks. N\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  border-spacing: 10px 50px;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_485\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-485\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_4.png\" alt=\"Erinevad kaugused vasaku\/parema ja \u00fclemise\/alumise k\u00fclje joaks\" width=\"450\" height=\"193\" \/> Erinevad kaugused vasaku\/parema ja \u00fclemise\/alumise k\u00fclje joaks[\/caption]\r\n\r\nSageli on tabelis t\u00fchjasid lahtreid. CSS-i abil saab m\u00e4\u00e4rata, kas neid n\u00e4idatakse, selleks on omadus <em>empty-cells<\/em>, millel v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em> show<\/em> \u2013 t\u00fchje lahtreid n\u00e4idatakse;<\/li>\r\n \t<li><em>hide<\/em> \u2013 t\u00fchje lahtreid ei n\u00e4idata;<\/li>\r\n \t<li><em>inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (<em>parent<\/em>);<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  empty-cells: show;\r\n}<\/pre>\r\n<h1>Tabeli pealdis<\/h1>\r\nTabeli pealdise (<em>caption<\/em>) kasutamisel saab CSS-i abil m\u00e4\u00e4rata, kuhu see paigutatakse.\r\n\r\nKasutusel omadus <em>caption-side<\/em>, millel v\u00f5imalikud v\u00e4\u00e4rtused <em>top<\/em> ja <em>bottom<\/em>:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  caption-side:bottom;\r\n}<\/pre>\r\n&nbsp;","rendered":"<p>CSS v\u00f5imaldab m\u00e4\u00e4rata ka tabelite v\u00e4limust. Tabelite v\u00e4limust m\u00e4\u00e4ravad suuresti omadused, mis kasutusel ka teistel elementidel (taustav\u00e4rv, tekstiv\u00e4rv, raamjooned, polsterdus jms) kuid on kasutusel ka m\u00f5ned eriomadused.<\/p>\n<p>M\u00e4\u00e4rata, kuidas jaotatakse ruum tabeli lahtrite, ridade ja veergude vahel, selleks on omadus <em>table-layout<\/em>, mille v\u00e4\u00e4rtuseks on:<\/p>\n<ul>\n<li><em>auto<\/em> \u2013 mille puhul tabeli veergude laius m\u00e4\u00e4ratakse sisu j\u00e4rgi, vaikev\u00e4\u00e4rtus;<\/li>\n<li><em>fixed<\/em> \u2013 mille korral kehtivad autori poolt m\u00e4\u00e4ratud lahtrite m\u00f5\u00f5dud;<\/li>\n<li><em>inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (parent);<\/li>\n<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  table-layout: auto;\r\n}<\/pre>\n<h1>Tabeli raamjoonte seaded<\/h1>\n<p>Saab m\u00e4\u00e4rata, kuidas n\u00e4idatakse raamjooni. Terve tabeli ja lahtrite jooned v\u00f5ivad olla kokkupandud (\u00fche joonena) v\u00f5i eraldi n\u00e4htavad.<\/p>\n<p>Kasutatakse omadust <em>border-collapse<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>collapse<\/em> \u2013 tabeli ja lahtrite raamjooni n\u00e4idatakse koos, \u00fche joonena;<\/li>\n<li><em>separate<\/em> \u2013 tabeli ja lahtrite raamjooni n\u00e4idatakse eraldi;<\/li>\n<li><em>inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (<em>parent<\/em>);<\/li>\n<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  border-collapse: collapse;\r\n}<\/pre>\n<figure id=\"attachment_482\" aria-describedby=\"caption-attachment-482\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-482\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_2.png\" alt=\"Tabeli jooned koos (collapse)\" width=\"450\" height=\"178\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_2.png 520w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_2-300x119.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_2-65x26.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_2-225x89.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_2-350x139.png 350w\" \/><figcaption id=\"caption-attachment-482\" class=\"wp-caption-text\">Tabeli jooned koos (<em>collapse<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_481\" aria-describedby=\"caption-attachment-481\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-481\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_1.png\" alt=\"6Tabeli jooned eraldi (separate)\" width=\"450\" height=\"199\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_1.png 546w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_1-300x133.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_1-65x29.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_1-225x100.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_1-350x155.png 350w\" \/><figcaption id=\"caption-attachment-481\" class=\"wp-caption-text\">Tabeli jooned eraldi (<em>separate<\/em>)<\/figcaption><\/figure>\n<p>Kui kasutatakse v\u00e4\u00e4rtust \u201e<em>separate<\/em>\u201c, siis saab omadusega <em>border-spacing<\/em> m\u00e4\u00e4rata lahtrite ja tabeli raamjoonte omavahelist kaugust (px, em vms).<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  border-collapse: separate;\r\n  border-spacing: 10px\r\n}<\/pre>\n<figure id=\"attachment_484\" aria-describedby=\"caption-attachment-484\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-484\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_3.png\" alt=\"Tabeli joonte omavaheline kaugus on suurendatud\" width=\"450\" height=\"251\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_3.png 587w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_3-300x167.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_3-65x36.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_3-225x125.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_3-350x195.png 350w\" \/><figcaption id=\"caption-attachment-484\" class=\"wp-caption-text\">Tabeli joonte omavaheline kaugus on suurendatud<\/figcaption><\/figure>\n<p>Kasutades siin t\u00fchikuga eraldatult kahte v\u00e4\u00e4rtust, m\u00e4\u00e4rame erinevad kaugused vasaku\/parema ja \u00fclemise\/alumise k\u00fclje jaoks. N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  border-spacing: 10px 50px;\r\n}\r\n<\/pre>\n<figure id=\"attachment_485\" aria-describedby=\"caption-attachment-485\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-485\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_4.png\" alt=\"Erinevad kaugused vasaku\/parema ja \u00fclemise\/alumise k\u00fclje joaks\" width=\"450\" height=\"193\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_4.png 623w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_4-300x129.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_4-65x28.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_4-225x96.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/tabel_4-350x150.png 350w\" \/><figcaption id=\"caption-attachment-485\" class=\"wp-caption-text\">Erinevad kaugused vasaku\/parema ja \u00fclemise\/alumise k\u00fclje joaks<\/figcaption><\/figure>\n<p>Sageli on tabelis t\u00fchjasid lahtreid. CSS-i abil saab m\u00e4\u00e4rata, kas neid n\u00e4idatakse, selleks on omadus <em>empty-cells<\/em>, millel v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em> show<\/em> \u2013 t\u00fchje lahtreid n\u00e4idatakse;<\/li>\n<li><em>hide<\/em> \u2013 t\u00fchje lahtreid ei n\u00e4idata;<\/li>\n<li><em>inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (<em>parent<\/em>);<\/li>\n<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  empty-cells: show;\r\n}<\/pre>\n<h1>Tabeli pealdis<\/h1>\n<p>Tabeli pealdise (<em>caption<\/em>) kasutamisel saab CSS-i abil m\u00e4\u00e4rata, kuhu see paigutatakse.<\/p>\n<p>Kasutusel omadus <em>caption-side<\/em>, millel v\u00f5imalikud v\u00e4\u00e4rtused <em>top<\/em> ja <em>bottom<\/em>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">table {\r\n  caption-side:bottom;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"author":1,"menu_order":7,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":310,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/479"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":3,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/479\/revisions"}],"predecessor-version":[{"id":486,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/479\/revisions\/486"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/310"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/479\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=479"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=479"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=479"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}