{"id":10230,"date":"2026-11-01T10:35:41","date_gmt":"2026-11-01T07:35:41","guid":{"rendered":"https:\/\/www.yunuskaytan.com\/?p=10230"},"modified":"2026-11-01T10:35:41","modified_gmt":"2026-11-01T07:35:41","slug":"html-de-tablo-olusturma","status":"publish","type":"post","link":"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-tablo-olusturma\/","title":{"rendered":"HTML&#8217;de Tablo Olu\u015fturma"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Web sayfalar\u0131nda verileri yap\u0131land\u0131r\u0131lm\u0131\u015f, okunabilir ve kar\u015f\u0131la\u015ft\u0131r\u0131labilir bir bi\u00e7imde sunman\u0131n en temel yolu tablolard\u0131r. Kullan\u0131c\u0131 listeleri, finansal raporlar, teknik \u00f6zellik listeleri ya da sunucu durum kay\u0131tlar\u0131 gibi iki boyutlu veri k\u00fcmeleri ekranda g\u00f6sterilmek istendi\u011finde HTML tablolar\u0131 devreye girer. Ge\u00e7mi\u015fte t\u00fcm sayfa d\u00fczenini kurmak amac\u0131yla yanl\u0131\u015f bir bi\u00e7imde kullan\u0131lan bu yap\u0131lar, g\u00fcn\u00fcm\u00fcz modern web standartlar\u0131nda yaln\u0131zca anlamsal veri g\u00f6sterimi amac\u0131yla tercih edilmektedir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Tablo Yap\u0131s\u0131n\u0131n Temel Mant\u0131\u011f\u0131<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML \u00fczerinde bir tablo in\u015fa etmek, sat\u0131rlar ve s\u00fctunlardan olu\u015fan bir matris kurmaya benzer. Taray\u0131c\u0131lar tabloyu yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru, sat\u0131r sat\u0131r i\u015fler. Bu mimarinin anla\u015f\u0131lmas\u0131 i\u00e7in d\u00f6rt ana etiketin i\u015flevini bilmek gerekir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>table: T\u00fcm tablo yap\u0131s\u0131n\u0131 sarmalayan ve taray\u0131c\u0131ya bir tablonun ba\u015flad\u0131\u011f\u0131n\u0131 bildiren ana kapsay\u0131c\u0131d\u0131r.<\/li>\n\n<li>tr: &#8220;Table row&#8221; ifadesinin k\u0131saltmas\u0131d\u0131r ve tablodaki yatay sat\u0131rlar\u0131 temsil eder. Tabloya eklenecek her yeni veri sat\u0131r\u0131 bu etiketle a\u00e7\u0131l\u0131r.<\/li>\n\n<li>th: &#8220;Table header&#8221; anlam\u0131na gelir. S\u00fctunlar\u0131n veya sat\u0131rlar\u0131n ba\u015fl\u0131klar\u0131n\u0131 tan\u0131mlar. Varsay\u0131lan olarak taray\u0131c\u0131lar taraf\u0131ndan kal\u0131n ve ortalanm\u0131\u015f olarak g\u00f6sterilir.<\/li>\n\n<li>td: &#8220;Table data&#8221; ifadesini temsil eder. Sat\u0131r i\u00e7indeki as\u0131l veri h\u00fccrelerini olu\u015fturur.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Temel Bir Tablo \u00d6rne\u011fi<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En sade haliyle bir tablonun nas\u0131l kuruldu\u011funu g\u00f6rmek, yap\u0131n\u0131n mant\u0131\u011f\u0131n\u0131 kavramay\u0131 kolayla\u015ft\u0131r\u0131r. A\u015fa\u011f\u0131daki \u00f6rnekte \u00fc\u00e7 s\u00fctunlu ve iki sat\u0131rl\u0131 basit bir kullan\u0131c\u0131 listesi yer almaktad\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;First name&lt;\/th&gt;\n    &lt;th&gt;Soyad&lt;\/th&gt;\n    &lt;th&gt;Rol&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Yunus&lt;\/td&gt;\n    &lt;td&gt;Kaytan&lt;\/td&gt;\n    &lt;td&gt;Y&ouml;netici&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Yukar\u0131daki kod par\u00e7as\u0131nda ilk olarak table etiketi ile alan tan\u0131mlanm\u0131\u015ft\u0131r. \u0130lk tr blo\u011fu i\u00e7inde \u00fc\u00e7 adet th etiketi yer al\u0131r; bu etiketler tablonun ba\u015fl\u0131k s\u00fctunlar\u0131n\u0131 olu\u015fturur. \u0130kinci tr blo\u011funda ise bu ba\u015fl\u0131klara kar\u015f\u0131l\u0131k gelen td etiketleri kullan\u0131larak veri h\u00fccreleri doldurulmu\u015ftur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tabloyu Anlamsal Olarak Yap\u0131land\u0131rma<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">K\u00fc\u00e7\u00fck tablolarda yaln\u0131zca tr ve td kullanmak yeterli g\u00f6r\u00fcnse de, b\u00fcy\u00fck ve karma\u015f\u0131k veri k\u00fcmelerinde tablonun anlamsal (semantik) olarak b\u00f6l\u00fcmlere ayr\u0131lmas\u0131 gerekir. HTML5 ile birlikte standartla\u015fan bu b\u00f6l\u00fcmler hem arama motorlar\u0131n\u0131n tabloyu daha iyi anlamas\u0131n\u0131 sa\u011flar hem de ekran okuyucu kullanan g\u00f6rme engelli bireyler i\u00e7in eri\u015filebilirli\u011fi art\u0131r\u0131r.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>thead: Tablonun ba\u015fl\u0131k sat\u0131rlar\u0131n\u0131 bar\u0131nd\u0131ran \u00fcst b\u00f6l\u00fcmd\u00fcr.<\/li>\n\n<li>tbody: Tablonun as\u0131l i\u00e7eri\u011fini, yani veri sat\u0131rlar\u0131n\u0131 bar\u0131nd\u0131ran g\u00f6vde b\u00f6l\u00fcm\u00fcd\u00fcr.<\/li>\n\n<li>tfoot: Tablonun alt bilgi veya \u00f6zet sat\u0131r\u0131n\u0131 bar\u0131nd\u0131ran b\u00f6l\u00fcmd\u00fcr. Genellikle toplam de\u011ferler ya da dipnotlar i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Semantik Tablo \u00d6rne\u011fi<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A\u015fa\u011f\u0131daki \u00f6rnekte semantik etiketlerin hiyerar\u015fik d\u00fczeni g\u00f6sterilmektedir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Sunucu Ad\u0131&lt;\/th&gt;\n      &lt;th&gt;IP Adresi&lt;\/th&gt;\n      &lt;th&gt;Durum&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Web-01&lt;\/td&gt;\n      &lt;td&gt;192.168.1.10&lt;\/td&gt;\n      &lt;td&gt;Aktif&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;DB-01&lt;\/td&gt;\n      &lt;td&gt;192.168.1.20&lt;\/td&gt;\n      &lt;td&gt;Aktif&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n  &lt;tfoot&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Toplam Sunucu&lt;\/td&gt;\n      &lt;td&gt;2&lt;\/td&gt;\n      &lt;td&gt;Sorunsuz&lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tfoot&gt;\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bu yap\u0131da taray\u0131c\u0131, thead alan\u0131n\u0131n ba\u015fl\u0131klar\u0131, tbody alan\u0131n\u0131n veri ak\u0131\u015f\u0131n\u0131, tfoot alan\u0131n\u0131n ise sonu\u00e7 sat\u0131r\u0131n\u0131 temsil etti\u011fini do\u011frudan kavrar. Uzun tablolarda sayfaland\u0131rma veya yazd\u0131rma i\u015flemi yap\u0131ld\u0131\u011f\u0131nda taray\u0131c\u0131lar thead b\u00f6l\u00fcm\u00fcn\u00fc her sayfan\u0131n ba\u015f\u0131nda otomatik olarak tekrar g\u00f6sterebilir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">H\u00fccreleri Birle\u015ftirme: colspan ve rowspan<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Baz\u0131 durumlarda bir veri h\u00fccresinin birden fazla s\u00fctuna veya sat\u0131ra yay\u0131lmas\u0131 gerekir. Bu i\u015flem i\u00e7in td ve th etiketlerine uygulanan iki \u00f6zel \u00f6znitelik kullan\u0131l\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>colspan: Bir h\u00fccrenin yatayda ka\u00e7 s\u00fctun geni\u015fli\u011finde olaca\u011f\u0131n\u0131 belirler. &#8220;Column span&#8221; anlam\u0131na gelir.<\/li>\n\n<li>rowspan: Bir h\u00fccrenin dikeyde ka\u00e7 sat\u0131r boyunca uzanaca\u011f\u0131n\u0131 belirler. &#8220;Row span&#8221; anlam\u0131na gelir.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00fccre birle\u015ftirme yap\u0131l\u0131rken dikkat edilmesi gereken en kritik kural, birle\u015ftirilen h\u00fccre adedi kadar di\u011fer h\u00fccrelerin sat\u0131rdan \u00e7\u0131kar\u0131lmas\u0131 gerekti\u011fidir. Aksi takdirde tablonun hizalamas\u0131 bozulur ve h\u00fccreler sa\u011fa do\u011fru kayar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Kategori&lt;\/th&gt;\n    &lt;th&gt;Protokol&lt;\/th&gt;\n    &lt;th&gt;Port&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td rowspan=&quot;2&quot;&gt;A\u011f G&uuml;venli\u011fi&lt;\/td&gt;\n    &lt;td&gt;SSH&lt;\/td&gt;\n    &lt;td&gt;22&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;HTTPS&lt;\/td&gt;\n    &lt;td&gt;443&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Genel A&ccedil;\u0131klama&lt;\/td&gt;\n    &lt;td colspan=&quot;2&quot;&gt;Kritik y&ouml;netim servisleri&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bu \u00f6rnekte &#8220;A\u011f G\u00fcvenli\u011fi&#8221; h\u00fccresi rowspan=&#8221;2&#8243; de\u011feri ald\u0131\u011f\u0131 i\u00e7in iki sat\u0131r boyunca dikey olarak uzan\u0131r. Bu nedenle bir sonraki sat\u0131ra \u00fc\u00e7\u00fcnc\u00fc bir h\u00fccre eklenmemi\u015f, sadece iki h\u00fccre yaz\u0131lm\u0131\u015ft\u0131r. Son sat\u0131rda ise colspan=&#8221;2&#8243; kullan\u0131larak tek bir h\u00fccre iki s\u00fctunluk geni\u015fli\u011fe yay\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS ile Tablolar\u0131 Bi\u00e7imlendirme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ham HTML tablolar\u0131 g\u00f6rsel a\u00e7\u0131dan olduk\u00e7a ilkeldir; varsay\u0131lan olarak kenarl\u0131klar\u0131 dahi belirgin de\u011fildir. Tabloyu modern ve okunabilir hale getirmek i\u00e7in CSS kullan\u0131l\u0131r. Tablo tasar\u0131m\u0131nda en s\u0131k ihtiya\u00e7 duyulan \u00f6zellik border-collapse \u00f6zelli\u011fidir.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Taray\u0131c\u0131lar varsay\u0131lan olarak h\u00fccre s\u0131n\u0131rlar\u0131 aras\u0131nda bo\u015fluk b\u0131rak\u0131r (ayr\u0131k kenarl\u0131k modeli). Kenarl\u0131klar\u0131 tek bir \u00e7izgide birle\u015ftirmek i\u00e7in border-collapse: collapse kural\u0131 atanmal\u0131d\u0131r.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\nth, td {\n  border: 1px solid #cccccc;\n  padding: 8px 12px;\n  text-align: left;\n}\n\nth {\n  background-color: #f4f4f4;\n}\n\ntr:nth-child(even) {\n  background-color: #fafafa;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bu CSS kurallar\u0131n\u0131n i\u015flevleri \u015fu \u015fekildedir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>border-collapse: collapse kural\u0131, \u00e7ift kenarl\u0131k g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc ortadan kald\u0131rarak \u015f\u0131k ve tek bir \u00e7izgi olu\u015fturur.<\/li>\n\n<li>padding \u00f6zelli\u011fi h\u00fccre i\u00e7eri\u011fi ile kenarl\u0131k aras\u0131na bo\u015fluk b\u0131rakarak verinin nefes almas\u0131n\u0131 sa\u011flar.<\/li>\n\n<li>text-align: left kural\u0131 metinlerin sola dayal\u0131 d\u00fczenli durmas\u0131n\u0131 sa\u011flar.<\/li>\n\n<li>tr:nth-child(even) se\u00e7icisi \u00e7ift numaral\u0131 sat\u0131rlara a\u00e7\u0131k gri bir arka plan rengi atayarak &#8220;zebra deseni&#8221; olu\u015fturur ve sat\u0131rlar\u0131n takibini kolayla\u015ft\u0131r\u0131r.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Veri G\u00fcvenli\u011fi A\u00e7\u0131s\u0131ndan Tablolar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bili\u015fim ve g\u00fcvenlik odakl\u0131 projelerde dinamik tablolar s\u0131k\u00e7a kullan\u0131l\u0131r. Veritaban\u0131ndan \u00e7ekilen sistem loglar\u0131 veya kullan\u0131c\u0131 girdileri tablo h\u00fccrelerine yazd\u0131r\u0131l\u0131rken g\u00fcvenlik ihmal edilmemelidir. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kullan\u0131c\u0131dan al\u0131nan veriler do\u011frudan td etiketleri aras\u0131na temizlenmeden (sanitize edilmeden) bas\u0131l\u0131rsa, Siteler Aras\u0131 Betik \u00c7al\u0131\u015ft\u0131rma (XSS) zafiyeti ortaya \u00e7\u0131kabilir. Sald\u0131rgan, ad veya a\u00e7\u0131klama alan\u0131na JavaScript kodlar\u0131 yerle\u015ftirerek tablonun taray\u0131c\u0131da i\u015flendi\u011fi s\u0131rada bu kodlar\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayabilir. Bu nedenle tablo h\u00fccrelerine dinamik veri yazd\u0131r\u0131l\u0131rken HTML karakterlerinin mutlaka filtrelenmesi gerekir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Eri\u015filebilirlik ve En \u0130yi Uygulamalar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Profesyonel bir web geli\u015ftirmede tablolar\u0131n standartlara uygun olmas\u0131 i\u00e7in \u015fu kurallara dikkat edilmelidir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>caption etiketi kullanarak tablonun ne ama\u00e7la olu\u015fturuldu\u011funu belirten k\u0131sa bir ba\u015fl\u0131k ekleyin. Bu etiket do\u011frudan table etiketinin hemen alt\u0131na yaz\u0131l\u0131r.<\/li>\n\n<li>th etiketlerinde scope \u00f6zniteli\u011fini kullan\u0131n. scope=&#8221;col&#8221; de\u011feri ba\u015fl\u0131\u011f\u0131n bir s\u00fctuna, scope=&#8221;row&#8221; de\u011feri ise bir sat\u0131ra ait oldu\u011funu yard\u0131mc\u0131 teknolojilere a\u00e7\u0131k\u00e7a bildirir.<\/li>\n\n<li>Kesinlikle sayfa iskeletini veya d\u00fczenini kurmak i\u00e7in tablo kullanmay\u0131n; mizanpaj i\u015flemleri i\u00e7in CSS Flexbox veya CSS Grid tercih edin.<\/li>\n\n<li>Mobil cihazlarda geni\u015f tablolar\u0131n ta\u015fmas\u0131n\u0131 \u00f6nlemek amac\u0131yla tabloyu overflow-x: auto stiline sahip bir div kapsay\u0131c\u0131s\u0131 i\u00e7erisine al\u0131n.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u00d6zet ve Sonraki Ad\u0131mlar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML tablolar\u0131; table, tr, th ve td temel etiketleri \u00fczerine kurulur. thead, tbody ve tfoot yap\u0131lar\u0131 veriyi anlamsal b\u00f6l\u00fcmlere ay\u0131r\u0131rken; colspan ve rowspan \u00f6znitelikleri karma\u015f\u0131k \u0131zgara d\u00fczenleri olu\u015fturman\u0131za imkan tan\u0131r. CSS yard\u0131m\u0131yla bi\u00e7imlendirilen tablolar, kullan\u0131c\u0131ya rahat bir okuma deneyimi sunar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tablo mimarisini kavrad\u0131ktan sonraki ad\u0131mda, ekran boyutuna g\u00f6re \u015fekil alan responsive tablo tasar\u0131mlar\u0131n\u0131 inceleyebilir ve CSS Grid sistemi ile tablo yap\u0131lar\u0131 aras\u0131ndaki farklar\u0131 \u00f6\u011frenerek sayfa d\u00fczeni tekniklerinizi geli\u015ftirebilirsiniz.<\/p>","protected":false},"excerpt":{"rendered":"<p>Web sayfalar\u0131nda verileri sat\u0131r ve s\u00fctunlar halinde d\u00fczenli g\u00f6stermek i\u00e7in kullan\u0131lan HTML tablo etiketlerini, h\u00fccre birle\u015ftirmeyi ve stil kurallar\u0131n\u0131 ke\u015ffedin.<\/p>","protected":false},"author":1,"featured_media":10231,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[226],"tags":[234,543,241,544,302],"class_list":["post-10230","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-ve-css","tag-css","tag-frontend","tag-html","tag-html-tablo","tag-web-gelistirme"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML&#039;de Tablo Olu\u015fturma - Yunus KAYTAN<\/title>\n<meta name=\"description\" content=\"HTML tablo yap\u0131s\u0131n\u0131 s\u0131f\u0131rdan \u00f6\u011frenin. table, tr, td etiketleri, h\u00fccre birle\u015ftirme ve temel CSS stilleri ile verilerinizi d\u00fczenli bir \u015fekilde listeleyin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-tablo-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML&#039;de Tablo Olu\u015fturma - Yunus KAYTAN\" \/>\n<meta property=\"og:description\" content=\"HTML tablo yap\u0131s\u0131n\u0131 s\u0131f\u0131rdan \u00f6\u011frenin. table, tr, td etiketleri, h\u00fccre birle\u015ftirme ve temel CSS stilleri ile verilerinizi d\u00fczenli bir \u015fekilde listeleyin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-tablo-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Yunus KAYTAN\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-01T07:35:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-tablo-olusturma-kapak.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yunuskaytan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yunuskaytan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/\"},\"author\":{\"name\":\"yunuskaytan\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/person\\\/be66986fb499da83a5685de34f68d15a\"},\"headline\":\"HTML&#8217;de Tablo Olu\u015fturma\",\"datePublished\":\"2026-11-01T07:35:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/\"},\"wordCount\":1293,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/html-de-tablo-olusturma-kapak.jpg\",\"keywords\":[\"css\",\"frontend\",\"html\",\"html tablo\",\"web gelistirme\"],\"articleSection\":[\"HTML ve CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/\",\"name\":\"HTML'de Tablo Olu\u015fturma - Yunus KAYTAN\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/html-de-tablo-olusturma-kapak.jpg\",\"datePublished\":\"2026-11-01T07:35:41+00:00\",\"description\":\"HTML tablo yap\u0131s\u0131n\u0131 s\u0131f\u0131rdan \u00f6\u011frenin. table, tr, td etiketleri, h\u00fccre birle\u015ftirme ve temel CSS stilleri ile verilerinizi d\u00fczenli bir \u015fekilde listeleyin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/html-de-tablo-olusturma-kapak.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/blog-kapak\\\/html-de-tablo-olusturma-kapak.jpg\",\"width\":1200,\"height\":630,\"caption\":\"HTML'de Tablo Olu\u015fturma\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/yk\\\/html-de-tablo-olusturma\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML&#8217;de Tablo Olu\u015fturma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#website\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\",\"name\":\"Yunus KAYTAN\",\"description\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yunuskaytan.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#organization\",\"name\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/cropped-BILISIM-VE-SIBER-GUVENLIK.png\",\"contentUrl\":\"https:\\\/\\\/www.yunuskaytan.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/cropped-BILISIM-VE-SIBER-GUVENLIK.png\",\"width\":400,\"height\":109,\"caption\":\"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yunuskaytan.com\\\/#\\\/schema\\\/person\\\/be66986fb499da83a5685de34f68d15a\",\"name\":\"yunuskaytan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g\",\"caption\":\"yunuskaytan\"},\"sameAs\":[\"http:\\\/\\\/www.yunuskaytan.com\"],\"url\":\"https:\\\/\\\/www.yunuskaytan.com\\\/en\\\/yk\\\/author\\\/yunuskaytan\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML'de Tablo Olu\u015fturma - Yunus KAYTAN","description":"HTML tablo yap\u0131s\u0131n\u0131 s\u0131f\u0131rdan \u00f6\u011frenin. table, tr, td etiketleri, h\u00fccre birle\u015ftirme ve temel CSS stilleri ile verilerinizi d\u00fczenli bir \u015fekilde listeleyin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-tablo-olusturma\/","og_locale":"en_US","og_type":"article","og_title":"HTML'de Tablo Olu\u015fturma - Yunus KAYTAN","og_description":"HTML tablo yap\u0131s\u0131n\u0131 s\u0131f\u0131rdan \u00f6\u011frenin. table, tr, td etiketleri, h\u00fccre birle\u015ftirme ve temel CSS stilleri ile verilerinizi d\u00fczenli bir \u015fekilde listeleyin.","og_url":"https:\/\/www.yunuskaytan.com\/en\/yk\/html-de-tablo-olusturma\/","og_site_name":"Yunus KAYTAN","article_published_time":"2026-11-01T07:35:41+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-tablo-olusturma-kapak.jpg","type":"image\/jpeg"}],"author":"yunuskaytan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yunuskaytan","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/#article","isPartOf":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/"},"author":{"name":"yunuskaytan","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/person\/be66986fb499da83a5685de34f68d15a"},"headline":"HTML&#8217;de Tablo Olu\u015fturma","datePublished":"2026-11-01T07:35:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/"},"wordCount":1293,"commentCount":0,"publisher":{"@id":"https:\/\/www.yunuskaytan.com\/#organization"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-tablo-olusturma-kapak.jpg","keywords":["css","frontend","html","html tablo","web gelistirme"],"articleSection":["HTML ve CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/","url":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/","name":"HTML'de Tablo Olu\u015fturma - Yunus KAYTAN","isPartOf":{"@id":"https:\/\/www.yunuskaytan.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/#primaryimage"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-tablo-olusturma-kapak.jpg","datePublished":"2026-11-01T07:35:41+00:00","description":"HTML tablo yap\u0131s\u0131n\u0131 s\u0131f\u0131rdan \u00f6\u011frenin. table, tr, td etiketleri, h\u00fccre birle\u015ftirme ve temel CSS stilleri ile verilerinizi d\u00fczenli bir \u015fekilde listeleyin.","breadcrumb":{"@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/#primaryimage","url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-tablo-olusturma-kapak.jpg","contentUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/blog-kapak\/html-de-tablo-olusturma-kapak.jpg","width":1200,"height":630,"caption":"HTML'de Tablo Olu\u015fturma"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yunuskaytan.com\/yk\/html-de-tablo-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/www.yunuskaytan.com\/"},{"@type":"ListItem","position":2,"name":"HTML&#8217;de Tablo Olu\u015fturma"}]},{"@type":"WebSite","@id":"https:\/\/www.yunuskaytan.com\/#website","url":"https:\/\/www.yunuskaytan.com\/","name":"Yunus KAYTAN","description":"Information Technology, Cybersecurity, Cybercrimes and Social Engineering","publisher":{"@id":"https:\/\/www.yunuskaytan.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yunuskaytan.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.yunuskaytan.com\/#organization","name":"Information Technology, Cybersecurity, Cybercrimes and Social Engineering","url":"https:\/\/www.yunuskaytan.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/2021\/07\/cropped-BILISIM-VE-SIBER-GUVENLIK.png","contentUrl":"https:\/\/www.yunuskaytan.com\/wp-content\/uploads\/2021\/07\/cropped-BILISIM-VE-SIBER-GUVENLIK.png","width":400,"height":109,"caption":"Bili\u015fim, Siber G\u00fcvenlik, Siber Su\u00e7lar ve Sosyal M\u00fchendislik"},"image":{"@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.yunuskaytan.com\/#\/schema\/person\/be66986fb499da83a5685de34f68d15a","name":"yunuskaytan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3caae7a5e52b2c1df0cbbb777ba7b421ad4777ac947e9320b5809e2d454ffdb4?s=96&d=mm&r=g","caption":"yunuskaytan"},"sameAs":["http:\/\/www.yunuskaytan.com"],"url":"https:\/\/www.yunuskaytan.com\/en\/yk\/author\/yunuskaytan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/comments?post=10230"}],"version-history":[{"count":1,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10230\/revisions"}],"predecessor-version":[{"id":10233,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/posts\/10230\/revisions\/10233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/media\/10231"}],"wp:attachment":[{"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/media?parent=10230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/categories?post=10230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yunuskaytan.com\/en\/wp-json\/wp\/v2\/tags?post=10230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}