<\/div>\n

Bildi\u011finiz gibi g\u00fcn\u00fcm\u00fcz web tasar\u0131mlar\u0131nda listeleme i\u015flemleri tablo(<table>…<\/table>) nesnesi ile de\u011fil, <div>…<\/div> nesnesi ile ger\u00e7ekle\u015ftirilmektedir.Bunun sebebi, hem Google arama motoru a\u00e7\u0131s\u0131ndan daha kaliteli bir site izlenimi yaratmak hem de site h\u0131z\u0131n\u0131 artt\u0131rmak gibi fakt\u00f6rler s\u00f6yleyebiliriz.<\/p>\n

Tabi benim gibi i\u015fin yaz\u0131l\u0131m boyutuna sevdal\u0131 olup tasar\u0131m boyutundan yoksunsan\u0131z e\u011fer “divler ile nas\u0131l tablo yap\u0131l\u0131r?” sorusunu sorabilirsiniz.Ben bu soru neticesinde internette k\u0131sa bir ara\u015ft\u0131rma sonucu g\u00fczel ve her zaman kullan\u0131labilir bir yap\u0131yla kar\u015f\u0131la\u015ft\u0131m.<\/p>\n

Hi\u00e7 uzatmadan olay\u0131n teknik boyutuna g\u00f6z atal\u0131m.
\nDiv nesnesiyle olu\u015fturaca\u011f\u0131m\u0131z tablonun HTML yap\u0131s\u0131 a\u015fa\u011f\u0131daki \u015fekilde olacakt\u0131r.<\/p>\n

\r\n<div class="table"> \/\/ Bu div <table> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n    <div> \/\/ Bu div <tr> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n        <div class="th">Ba\u015fl\u0131k 1<\/div> \/\/ Bu div <th> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n        <div class="th">Ba\u015fl\u0131k 2<\/div> \/\/ Bu div <th> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n    <\/div>\r\n    <div> \/\/ Bu div <tr> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n        <div>Sat\u0131r 1, S\u00fctun 1<\/div> \/\/ Bu div <td> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n        <div>Sat\u0131r 1, S\u00fctun 2<\/div> \/\/ Bu div <td> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n    <\/div>\r\n    <div> \/\/ Bu div <tr> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n        <div>Sat\u0131r 1, S\u00fctun 1<\/div> \/\/ Bu div <td> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n        <div>Sat\u0131r 1, S\u00fctun 2<\/div> \/\/ Bu div <td> tag\u0131 ile ayn\u0131 i\u015flevi g\u00f6r\u00fcyor\r\n    <\/div>\r\n<\/div>  \r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi mant\u0131ksal olarakta yukar\u0131da izah edildi\u011fi gibi divlerle tablomuzu yap\u0131sal olarak haz\u0131rlam\u0131\u015f olduk.\u015eimdide “table” isimli CSS Class’\u0131m\u0131z\u0131 tan\u0131mlayal\u0131m.<\/p>\n
\r\n    .table {\r\n        width: 100%;\r\n        display: table;\r\n    }\r\n        .table div {\r\n            display: table-row;\r\n        }\r\n            .table div div {\r\n                display: table-cell;\r\n                text-align: left;\r\n            }\r\n                .table div div.th {\r\n                    font-weight: bold;\r\n                    text-align: center;\r\n                }\r\n<\/pre>\n\u0130\u015fte bu kadar…
\nCSS e\u015fli\u011finde div nesnesiyle olu\u015fturdu\u011fumuz tablonun g\u00f6rsel hali a\u015fa\u011f\u0131daki gibi olacakt\u0131r.
\n<\/a><\/p>\n
Ufak tefek de\u011fi\u015fikliklerle kendi zevkinize uygun bir \u015fekle getirebilirsiniz \ud83d\ude42
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Bildi\u011finiz gibi g\u00fcn\u00fcm\u00fcz web tasar\u0131mlar\u0131nda listeleme i\u015flemleri tablo(<table>…<\/table>) nesnesi ile de\u011fil, <div>…<\/div> nesnesi ile ger\u00e7ekle\u015ftirilmektedir.Bunun sebebi, hem Google arama motoru a\u00e7\u0131s\u0131ndan daha kaliteli bir site izlenimi yaratmak hem de site h\u0131z\u0131n\u0131 artt\u0131rmak gibi fakt\u00f6rler...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[336],"tags":[251,591,445],"class_list":["post-2632","post","type-post","status-publish","format-standard","hentry","category-html5","tag-css","tag-div","tag-table"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=2632"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2632\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}