{"id":181,"date":"2020-03-01T21:10:33","date_gmt":"2020-03-01T21:10:33","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=181"},"modified":"2020-05-12T12:10:48","modified_gmt":"2020-05-12T12:10:48","slug":"html-tabelid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-tabelid\/","title":{"rendered":"HTML tabelid"},"content":{"raw":"Tabelit kasutatakse veebilehtedel andmete korrastatult esitamiseks ridade ja veergudena.\r\n\r\nTabel luuakse elemendi <table><\/code> abil ning tema sees kirjeldatakse \u00e4ra read, veerud ning nende sisu:\r\n
<table>\r\n  tabeli sisu\r\n<\/table><\/pre>\r\nRea loob tabeli sisse element <tr><\/code> (table row<\/em>) . N\u00e4iteks kahe reaga tabel:\r\n
<table>\r\n  <tr>\r\n    esimese rea sisu\r\n  <\/tr>\r\n  <tr>\r\n    teise rea sisu\r\n  <\/tr>\r\n<\/table><\/pre>\r\nLahtrid luuakse ridade sisse elemendiga <td><\/code> (table data<\/em>). N\u00e4iteks tabel kahe reaga, milles kummaski kaks lahtrit (ehk veergu):\r\n
<table>\r\n  <tr>\r\n    <td>esimese rea, vasaku lahtri sisu<\/td>\r\n    <td>esimese rea, parema lahtri sisu<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>teise rea, vasaku lahtri sisu<\/td>\r\n    <td>teise rea, parema lahtri sisu<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\r\n\"html\r\n\r\nKasutada saab ka eraldi elementi <th><\/code> tabeli veergude pealkirjade jaoks (table heading). Elementi <th><\/code> kasutatakse tabeli esimesel real (element <tr><\/code>) t\u00e4pselt nagu elementi <td><\/code> ning neid saab ka samamoodi kujundada. Vaikimisi on tegemist paksus kirjas keskele joondatud tekstiga.\r\n
<table>\r\n  <tr>\r\n    <th>esimese veeru p\u00e4is<\/th>\r\n    <th>teise veeru p\u00e4is<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>esimese rea, vasaku lahtri sisu<\/td>\r\n    <td>esimese rea, parema lahtri sisu<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>teise rea, vasaku lahtri sisu<\/td>\r\n    <td>teise rea, parema lahtri sisu<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\r\n\"HTML\r\n\r\nRaamjoonte lisamine<\/span>\r\n\r\nVaikev\u00e4\u00e4rtusena tabelitel n\u00e4htavaid raamjooni ei ole. Tabelile raamjoonte lisamiseks saame kasutada omadust border<\/code>. Lisame 1px paksuse musta raamjoone nii tabelile kui tabeli lahtritele:\r\n
<style>\r\ntable, th, td {\r\n  border: 1px solid black;\r\n}\r\n<\/style><\/pre>\r\n\"HTML\r\n\r\nKui me soovime suurendad erinevate lahtrite vahele j\u00e4\u00e4vat vaba ruumi, saame kasutada border-spacing<\/code> omadust.\r\n
<style> \r\ntable, th, td { \r\n  border: 1px solid black; \r\n  border-spacing: 10px;\r\n} \r\n<\/style><\/pre>\r\n\"HTML\r\n\r\nHetkel aga raamjooni lahtrite \u00fcmber topelt. Selleks et kaks raamjoont omavahel kokku liita, saame kasutada border-collapse<\/code> omadust.\r\n
<style>\r\ntable, th, td { \r\n  border: 1px solid black; \r\n  border-collapse: collapse;\r\n} \r\n<\/style><\/pre>\r\n\"HTML\r\n
Polsterduse lisamine (padding)<\/h2>\r\nViimases tabelis sooviksime lisada tabeli raamjoonte ja sisu vahele vaba ruumi (polsterdust), et tekst ei oleks p\u00e4ris raami k\u00fcljes kinni. Selleks saame kasutada omadust padding<\/code>.\r\n
<style>\r\ntable, th, td { \r\n  border: 1px solid black; \r\n  border-collapse: collapse;\r\n  padding: 10px;\r\n} \r\n<\/style><\/pre>\r\n\"HTML\r\n
Tabeli pealkiri\/pealdis<\/h2>\r\nTabelile pealkirja lisamiseks saame kasutada pealdise m\u00e4rgendit <caption><\/code>.\r\n
<table>\r\n  <caption>Siin on tabeli pealdis<\/caption>\r\n  <tr>\r\n    <th>esimese veeru p\u00e4is<\/th>\r\n    <th>teise veeru p\u00e4is<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>esimese rea, vasaku lahtri sisu<\/td>\r\n    <td>esimese rea, parema lahtri sisu<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>teise rea, vasaku lahtri sisu<\/td>\r\n    <td>teise rea, parema lahtri sisu<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\r\n\"HTML\r\n
Lahtrid \u00fcle mitme rea ja veeru<\/h2>\r\nKui me soovime, et m\u00f5ni lahter h\u00f5lmaks enda all mitu rida ja\/v\u00f5i veergu saame selleks kasutada atribuuti colspan<\/code> (m\u00e4\u00e4rab, \u00fcle mitme veeru lahter ulatub) ja atribuuti rowspan<\/code> (m\u00e4\u00e4rab, \u00fcle mitme rea lahter ulatub).\r\n
<table>\r\n  <tr>\r\n    <th colspan=\"2\">esimese veeru p\u00e4is<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td rowspan=\"2\">esimese rea, vasaku lahtri sisu<\/td>\r\n    <td>esimese rea, parema lahtri sisu<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>teise rea, parema lahtri sisu<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\r\n\"HTML\r\n
Enesekontroll (2 k\u00fcsimust)<\/h3>\r\n[h5p id=\"19\"]\r\n