{"id":806,"date":"2015-07-20T15:18:44","date_gmt":"2015-07-20T13:18:44","guid":{"rendered":"http:\/\/semmelweis.hu\/wiki\/?p=806"},"modified":"2025-10-18T09:22:05","modified_gmt":"2025-10-18T07:22:05","slug":"tabulalt-fules-megjelenites-egy-oldalon-vagy-bejegyzesen-belul","status":"publish","type":"page","link":"https:\/\/semmelweis.hu\/wiki\/kiegeszito-eszkozok\/tabulalt-fules-megjelenites-egy-oldalon-vagy-bejegyzesen-belul\/","title":{"rendered":"Tabul\u00e1lt (&#8222;f\u00fcles&#8221;) megjelen\u00edt\u00e9s egy oldalon vagy bejegyz\u00e9sen bel\u00fcl"},"content":{"rendered":"<div class=\"keretes w-100\">\n<p>A <strong>hossz\u00fa sz\u00f6veges tartalmak<\/strong> \u00e1tl\u00e1that\u00f3 rendez\u00e9s\u00e9re vagy \u00e9pp almen\u00fcpontok kiiktat\u00e1s\u00e1ra praktikus lehet ha egy oldalon\/bejegyz\u00e9sen bel\u00fcl a tartalmunkat <strong>v\u00edzszintesen csoportos\u00edtva<\/strong> rendezz\u00fck el. Erre <strong>&#8222;f\u00fcleket&#8221; (tabokat)<\/strong> tudunk haszn\u00e1lni, \u00edgy ennek az oldalnak az alj\u00e1n l\u00e1that\u00f3\/kipr\u00f3b\u00e1lhat\u00f3 eredm\u00e9nyt \u00e9rhetj\u00fck el.<\/p>\n<\/div>\n<h4><strong>I.<\/strong> <strong>hozzuk l\u00e9tre az \u00faj oldalt!<\/strong>\u00a0<\/h4>\n<p>vagy bejegyz\u00e9st (vagy szerkessz\u00fck a megl\u00e9v\u0151k k\u00f6z\u00fcl valamelyiket).<\/p>\n<h4><strong>II.<\/strong> A f\u00fcleket <strong>r\u00f6vid k\u00f3dokkal<\/strong> tudjuk l\u00e9trehozni<\/h4>\n<ol>\n<li>Az al\u00e1bbi sz\u00f6gletes z\u00e1r\u00f3jeles <strong>k\u00f3dokat m\u00e1soljuk ki \u00e9s illessz\u00fck be az oldalunk HTML n\u00e9zet\u00e9be<\/strong> (f\u00fcl). <span style=\"color: #ff6600;\"><strong>Figyelem! <\/strong><\/span>az al\u00e1bbi k\u00f3dok \u00e9s sz\u00f6vegek v\u00e9g\u00e9n tal\u00e1lhat\u00f3 <span style=\"color: #ff6600;\"><strong>[tabbyending]<\/strong><\/span> lez\u00e1r\u00f3 k\u00f3dra egyszer van csak sz\u00fcks\u00e9g, de ha azt nem m\u00e1soljuk \u00e1t a k\u00f3dok v\u00e9g\u00e9re (az utols\u00f3 f\u00fcl tartalma ut\u00e1n) akkor nem jelennek meg a f\u00fclek! <em>(Az al\u00e1bbi p\u00e9lda k\u00f3dok eredm\u00e9nye lejjebb g\u00f6rgetve tekinthet\u0151 meg.)<\/em><\/li>\n<li>Ezut\u00e1n m\u00e1r a <strong>grafikus m\u00f3dban dolgozhatunk<\/strong> tov\u00e1bb.\u00a0 <span style=\"font-size: 1rem;\"><strong>\u00cdrjuk \u00e1t a f\u00fclek c\u00edmeit<\/strong> a megfelel\u0151re (legyen r\u00f6vid, 1-2 szavas) \u00e9s a r\u00f6vid k\u00f3dok k\u00f6z\u00e9 helyezz\u00fck el a megfelel\u0151 tartalmakat!<\/span><i style=\"font-size: 1rem;\">\u00a0\u00a0<\/i><\/li>\n<\/ol>\n<h5>P\u00e9lda r\u00f6vidk\u00f3dok \u00e9s sz\u00f6vegek (a v\u00e9g\u00e9n a lez\u00e1r\u00f3 k\u00f3ddal):<\/h5>\n<pre style=\"padding-left: 40px;\">&#091;tabby title=\"Els\u0151 f\u00fcl\"&#093;<\/pre>\n<p style=\"padding-left: 40px;\">Els\u0151 f\u00fcl tartalma: c\u00edmsorok, sz\u00f6vegek, felsorol\u00e1sok, k\u00e9pek, vide\u00f3, t\u00e1bl\u00e1zat, b\u00e1rmi&#8230; \u00a0<br \/>\n(az al\u00e1bbi p\u00e9ld\u00e1ban a sz\u00f6veg \u00e9s a tantermes k\u00e9p)<\/p>\n<pre style=\"padding-left: 40px;\">&#091;tabby title=\"M\u00e1sodik f\u00fcl\"&#093;<\/pre>\n<p style=\"padding-left: 40px;\">M\u00e1sodik f\u00fcl tartalma<br \/>\n(a p\u00e9ld\u00e1ban a sz\u00f6veg felsorol\u00e1ssal)<\/p>\n<pre style=\"padding-left: 40px;\">&#091;tabby title=\"Harmadik f\u00fcl\"&#093;<\/pre>\n<p style=\"padding-left: 40px;\">Harmadik f\u00fcl tartalma<br \/>\n(a p\u00e9ld\u00e1ban a sz\u00f6veg \u00e9s a t\u00e1bl\u00e1zat)<\/p>\n<pre style=\"padding-left: 40px;\">&#091;tabby title=\"Sort\u00f6r\u00e9s\u00a0\r\na c\u00edmben\"&#093;<\/pre>\n<p style=\"padding-left: 40px;\">Negyedik f\u00fcl tartalma <br \/>\n(a p\u00e9ld\u00e1ban a sort\u00f6r\u00e9ses c\u00edmr\u0151l sz\u00f3l\u00f3 sz\u00f6veggel)<\/p>\n<pre style=\"padding-left: 40px;\">&#091;tabbyending&#093;<\/pre>\n<p>\u00a0\ud83d\udca1 <strong>A f\u00fclek elnevez\u00e9se grafikus n\u00e9zetben r\u00e9szlegesen form\u00e1zhat\u00f3:<\/strong> a c\u00edm f\u00e9lk\u00f6v\u00e9rr\u00e9 alak\u00edthat\u00f3, illetve a Shift+Enter egyidej\u0171 lenyom\u00e1s\u00e1val a c\u00edm az adott sz\u00f3 el\u0151tt \u00e1llva k\u00e9t sorba t\u00f6rhet\u0151.<\/p>\n<p>\u00a0\ud83d\udca1\u00a0 Pr\u00f3b\u00e1ljuk meg el\u00e9rni, hogy <strong>ne legyen <\/strong>olyan <strong>sok f\u00fcl<\/strong>, ami m\u00e1r t\u00f6bb sorba ker\u00fcl, mert bonyol\u00edtja a strukt\u00far\u00e1t \u00e9s nem is sz\u00e9p (esetleg haszn\u00e1lhatjuk az &#8222;oldals\u00e1v n\u00e9lk\u00fcli&#8221; oldalsablont, ha m\u00e9gis sz\u00fcks\u00e9ges). Ha t\u00fal sok f\u00fclre van sz\u00fcks\u00e9g, akkor a tartalom \u00e1tgondol\u00e1sa lehet sz\u00fcks\u00e9ges (pl. almen\u00fcpontokk\u00e1 alak\u00edt\u00e1s, vagy leny\u00edl\u00f3 felz\u00e1r\u00f3d\u00f3 funkci\u00f3 haszn\u00e1lhat\u00f3).\u00a0\u00a0<\/p>\n<p>\u00a0\ud83d\udca1 Ahogyan ezen az oldalon is l\u00e1that\u00f3, ami a r\u00f6vid k\u00f3dok el\u0151tt szerepel az oldalon, az b\u00e1rmely f\u00fcl\u00f6n \u00e1llva l\u00e1that\u00f3 lesz, \u00e9s ugyan\u00edgy \u00e1lland\u00f3an olvashat\u00f3 lesz, amit a tabbyending k\u00f3d ut\u00e1n tesz\u00fcnk.<\/p>\n<div class=\"keretes w-100\">\n<h5>Adott f\u00fclre linkel\u00e9s:<\/h5>\n<p>Hasznos lehet m\u00e9g, egy <strong>oldal linkel\u00e9se \u00fagy, hogy az \u00e1ltalunk megjelen\u00edteni k\u00edv\u00e1nt f\u00fcl legyen kiv\u00e1lasztva<\/strong> a megnyit\u00e1skor (pl. e-mailben ki akarjuk valakinek k\u00fcldeni az oldalt linkj\u00e9t, de \u00fagy, hogy az olvas\u00f3 a 3. f\u00fclet l\u00e1ssa megnyitva). <br \/>\nEhhez nem kell m\u00e1st tenn\u00fcnk mint a <strong>link v\u00e9g\u00e9re illeszteni egy kisebb sz\u00f6veget <span style=\"color: #ff6600;\">?target= <\/span><\/strong>majd a tabby r\u00f6vidk\u00f3dban <em><strong>&#8222;title&#8221;<\/strong><\/em>-k\u00e9nt megadott nevet kell <strong>\u00e9kezetek n\u00e9lk\u00fcl, kisbet\u0171vel, a sz\u00f3k\u00f6z\u00f6ket megtartva<\/strong>\u00a0be\u00edrni.<br \/>\nTeh\u00e1t \u00edgy n\u00e9z ki p\u00e9ld\u00e1ul: <span style=\"color: #ff6600;\">https:\/\/honlapom.hu\/oldal\/<strong>?target=harmadik ful neve <\/strong><\/span><em>&#8211; ezt k\u00fcldhetj\u00fck el e-mailben, vagy linkelhetj\u00fck m\u00e1s oldalakon<\/em><\/p>\n<\/div>\n<h4><strong>III. A fenti k\u00f3dok eredm\u00e9nye a k\u00f6vetkez\u0151 lesz<\/strong><\/h4>\n<div class=\"responsive-tabs\">\n<h2 class=\"tabtitle\">Els\u0151 f\u00fcl<\/h2>\n<div class=\"tabcontent\">\n\n<h1>C\u00edmsor 1 f\u00fcl (h1)<\/h1>\n<p><a href=\"https:\/\/semmelweis.hu\/wiki\/files\/2021\/03\/12874_transform.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright  wp-image-2011\" src=\"https:\/\/semmelweis.hu\/wiki\/files\/2021\/03\/12874_transform.jpg\" alt=\"\" width=\"266\" height=\"399\" srcset=\"https:\/\/semmelweis.hu\/wiki\/files\/2021\/03\/12874_transform.jpg 400w, https:\/\/semmelweis.hu\/wiki\/files\/2021\/03\/12874_transform-200x300.jpg 200w, https:\/\/semmelweis.hu\/wiki\/files\/2021\/03\/12874_transform-100x150.jpg 100w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><\/a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod urna quis fringilla convallis. Curabitur venenatis volutpat odio a rutrum. Sed euismod dui pharetra, tempus mauris a, auctor nulla. Proin in arcu urna. Duis ornare, ligula iaculis ullamcorper congue, nulla ligula consectetur libero, nec faucibus ipsum nulla nec nisi. Donec vestibulum ornare nibh quis interdum. Maecenas ultrices est magna, ut cursus ligula ultrices eget.<\/p>\n<p>Quisque et mi sed leo accumsan commodo vitae at augue. Sed volutpat lectus nisi, et fermentum magna rutrum in. Nullam varius purus non porta dapibus. Fusce a augue nec sapien tristique fermentum dignissim tristique nunc. Aliquam luctus nunc eu sem finibus, id placerat nibh facilisis. Vestibulum mollis diam at eleifend imperdiet. Suspendisse in mauris a leo vulputate pharetra sit amet et risus. Vivamus dictum mattis turpis, dignissim semper ligula interdum sed. Etiam sit amet ex lacus. Vestibulum nec magna tempor, sagittis ligula eu, pharetra odio.<\/p>\n<p>Phasellus nec erat interdum, rhoncus sem id, mattis quam. Nulla facilisi. Vestibulum semper nulla tortor, pretium tempor sem laoreet sit amet. Duis ut odio libero. Sed vitae libero nec tellus commodo vehicula. Integer dictum imperdiet libero. Quisque consectetur massa eget est porta finibus. Curabitur interdum eros ligula, eu accumsan eros viverra sit amet. Vestibulum scelerisque neque lacus, a viverra lectus ultrices eget.<\/p>\n\n<\/div><h2 class=\"tabtitle\">M\u00e1sodik f\u00fcl<\/h2>\n<div class=\"tabcontent\">\n\n<h1>C\u00edmsor 2 f\u00fcl (h1)<\/h1>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod urna quis fringilla convallis. Curabitur venenatis volutpat odio a rutrum. Sed euismod dui pharetra, tempus mauris a, auctor nulla.<\/p>\n<ul style=\"list-style-type: square;\">\n<li>Proin in arcu urna.<\/li>\n<li>Duis ornare, ligula iaculis ullamcorper congue,\u00a0 nulla ligula consectetur libero, nec faucibus ipsum nulla nec nisi.<\/li>\n<li>Donec vestibulum ornare nibh quis interdum.<\/li>\n<li>Maecenas ultrices est magna, ut cursus ligula ultrices eget.<\/li>\n<\/ul>\n<p>Quisque et mi sed leo accumsan commodo vitae at augue. Sed volutpat lectus nisi, et fermentum magna rutrum in. Nullam varius purus non porta dapibus. Fusce a augue nec sapien tristique fermentum dignissim tristique nunc. Aliquam luctus nunc eu sem finibus, id placerat nibh facilisis. Vestibulum mollis diam at eleifend imperdiet. Suspendisse in mauris a leo vulputate pharetra sit amet et risus. Vivamus dictum mattis turpis, dignissim semper ligula interdum sed. Etiam sit amet ex lacus. Vestibulum nec magna tempor, sagittis ligula eu, pharetra odio.<\/p>\n<p>Phasellus nec erat interdum, rhoncus sem id, mattis quam. Nulla facilisi. Vestibulum semper nulla tortor, pretium tempor sem laoreet sit amet. Duis ut odio libero. Sed vitae libero nec tellus commodo vehicula. Integer dictum imperdiet libero. Quisque consectetur massa eget est porta finibus. Curabitur interdum eros ligula, eu accumsan eros viverra sit amet. Vestibulum scelerisque neque lacus, a viverra lectus ultrices eget.<\/p>\n\n<\/div><h2 class=\"tabtitle\">Harmadik f\u00fcl<\/h2>\n<div class=\"tabcontent\">\n\n<h1>C\u00edmsor 3 f\u00fcl\u00a0(h1)<\/h1>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod urna quis fringilla convallis. Curabitur venenatis volutpat odio a rutrum. Sed euismod dui pharetra, tempus mauris a, auctor nulla. Proin in arcu urna. Duis ornare, ligula iaculis ullamcorper congue, nulla ligula consectetur libero, nec faucibus ipsum nulla nec nisi. Donec vestibulum ornare nibh quis interdum. Maecenas ultrices est magna, ut cursus ligula ultrices eget.<\/p>\n<table style=\"width: 100%;\">\n<thead>\n<tr>\n<td style=\"text-align: center;\"><strong>oszlop\u00a0c\u00edm 1<\/strong><\/td>\n<td style=\"text-align: center;\"><strong>oszlop\u00a0c\u00edm\u00a02<\/strong><\/td>\n<td style=\"text-align: center;\"><strong>oszlop\u00a0c\u00edm\u00a03<\/strong><\/td>\n<td style=\"text-align: center;\"><strong>oszlop\u00a0c\u00edm\u00a04<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>quisque et mi sed leo<\/td>\n<td style=\"text-align: center;\">121324<\/td>\n<td style=\"text-align: center;\">45%<\/td>\n<td style=\"text-align: center;\">X<\/td>\n<\/tr>\n<tr>\n<td>fermentum magna rutrum<\/td>\n<td style=\"text-align: center;\">233445<\/td>\n<td style=\"text-align: center;\">65%<\/td>\n<td style=\"text-align: center;\">Y<\/td>\n<\/tr>\n<tr>\n<td>rhoncus sem id, mattis quam<\/td>\n<td style=\"text-align: center;\">5465464<\/td>\n<td style=\"text-align: center;\">10%<\/td>\n<td style=\"text-align: center;\">V<\/td>\n<\/tr>\n<tr>\n<td>nulla tortor, pretium tempor<\/td>\n<td style=\"text-align: center;\">\n<p>21546<\/p>\n<\/td>\n<td style=\"text-align: center;\">59%<\/td>\n<td style=\"text-align: center;\">Z<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Quisque et mi sed leo accumsan commodo vitae at augue. Sed volutpat lectus nisi, et fermentum magna rutrum in. Nullam varius purus non porta dapibus. Fusce a augue nec sapien tristique fermentum dignissim tristique nunc. Aliquam luctus nunc eu sem finibus, id placerat nibh facilisis. Vestibulum mollis diam at eleifend imperdiet. Suspendisse in mauris a leo vulputate pharetra sit amet et risus. Vivamus dictum mattis turpis, dignissim semper ligula interdum sed. Etiam sit amet ex lacus. Vestibulum nec magna tempor, sagittis ligula eu, pharetra odio.<\/p>\n<p>Phasellus nec erat interdum, rhoncus sem id, mattis quam. Nulla facilisi. Vestibulum semper nulla tortor, pretium tempor sem laoreet sit amet. Duis ut odio libero. Sed vitae libero nec tellus commodo vehicula. Integer dictum imperdiet libero. Quisque consectetur massa eget est porta finibus. Curabitur interdum eros ligula, eu accumsan eros viverra sit amet. Vestibulum scelerisque neque lacus, a viverra lectus ultrices eget.<\/p>\n\n<\/div><h2 class=\"tabtitle\">Sort\u00f6r\u00e9s <br \/>\na c\u00edmben<\/h2>\n<div class=\"tabcontent\">\n\n<h1>C\u00edmsor 4 f\u00fcl (h1)<\/h1>\n<p><strong><span style=\"color: #ff6600;\">Ha hossz\u00fa a f\u00fcl c\u00edme, lehet\u0151s\u00e9g\u00fcnk van a c\u00edmet k\u00e9t sorba t\u00f6rni a Shift+Enter seg\u00edts\u00e9g\u00e9vel!\u00a0<\/span><\/strong><\/p>\n<h2>C\u00edmsor (h2)<\/h2>\n<h3>C\u00edmsor (h3)<\/h3>\n<p>Phasellus nec erat interdum, rhoncus sem id, mattis quam. Nulla facilisi. Vestibulum semper nulla tortor, pretium tempor sem laoreet sit amet. Duis ut odio libero. Sed vitae libero nec tellus commodo vehicula. Integer dictum imperdiet libero. Quisque consectetur massa eget est porta finibus. Curabitur interdum eros ligula, eu accumsan eros viverra sit amet. Vestibulum scelerisque neque lacus, a viverra lectus ultrices eget.<\/p>\n<ul>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/li>\n<li>Ut euismod urna quis fringilla convallis.<\/li>\n<li>Curabitur venenatis volutpat odio a rutrum.<\/li>\n<li>Sed euismod dui pharetra, tempus mauris a, auctor nulla.<\/li>\n<li>Proin in arcu urna.<\/li>\n<li>Duis ornare, ligula iaculis ullamcorper congue, nulla ligula consectetur libero, nec faucibus ipsum nulla nec nisi.<\/li>\n<li>Donec vestibulum ornare nibh quis interdum. Maecenas ultrices est magna, ut cursus ligula ultrices eget.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A hossz\u00fa sz\u00f6veges tartalmak \u00e1tl\u00e1that\u00f3 rendez\u00e9s\u00e9re vagy \u00e9pp almen\u00fcpontok kiiktat\u00e1s\u00e1ra praktikus lehet ha egy oldalon\/bejegyz\u00e9sen bel\u00fcl a tartalmunkat v\u00edzszintesen csoportos\u00edtva rendezz\u00fck el. Erre &#8222;f\u00fcleket&#8221; (tabokat) tudunk haszn\u00e1lni, \u00edgy ennek az oldalnak az alj\u00e1n l\u00e1that\u00f3\/kipr\u00f3b\u00e1lhat\u00f3 eredm\u00e9nyt \u00e9rhetj\u00fck el. I. hozzuk l\u00e9tre az \u00faj oldalt!\u00a0 vagy bejegyz\u00e9st (vagy szerkessz\u00fck a megl\u00e9v\u0151k k\u00f6z\u00fcl valamelyiket). II. A f\u00fcleket r\u00f6vid &hellip;<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":951,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[],"class_list":["post-806","page","type-page","status-publish","hentry","category-egyeb"],"acf":[],"publishpress_future_action":{"enabled":false,"date":"1970-01-01 01:00:00","action":"","terms":[],"taxonomy":"","browser_timezone_offset":0},"_links":{"self":[{"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/pages\/806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/comments?post=806"}],"version-history":[{"count":12,"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/pages\/806\/revisions"}],"predecessor-version":[{"id":3323,"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/pages\/806\/revisions\/3323"}],"up":[{"embeddable":true,"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/pages\/951"}],"wp:attachment":[{"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/media?parent=806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/categories?post=806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/semmelweis.hu\/wiki\/wp-json\/wp\/v2\/tags?post=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}