diff options
Diffstat (limited to 'files/tr/learn/css/building_blocks/styling_tables/index.html')
| -rw-r--r-- | files/tr/learn/css/building_blocks/styling_tables/index.html | 330 |
1 files changed, 330 insertions, 0 deletions
diff --git a/files/tr/learn/css/building_blocks/styling_tables/index.html b/files/tr/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..c7fb4335d7 --- /dev/null +++ b/files/tr/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,330 @@ +--- +title: Tabloları şekillendirme +slug: Öğren/CSS/CSS_yapi_taslari/Styling_tables +tags: + - Acemi + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Komut Dosyası + - Makale + - NeedsUpdate + - Rehber + - Stil + - Styling + - Tables + - Tablo +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı iş değildir, ancak bazen bunu hepimiz yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin vurgulanmasıyla HTML tablolarının güzel görünmesi için bir rehber sağlar.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>HTML tablolarının nasıl etkili bir şekilde biçimlendirileceğini öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Standart_bir_HTML_tablosu">Standart bir HTML tablosu</h2> + +<p>Standart bir HTML tablosuna bakarak başlayalım. HTML tablo örneklerinin çoğu ayakkabılar, hava durumu veya çalışanlarlar hakkındadır. Aşağıda İngiltere'nin ünlü punk gruplarının bulunduğu bir tablo bulunmakta. Biçimlendirme şöyle görünür.</p> + +<pre class="brush: html notranslate"><table> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... some rows removed for brevity + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>Tabloyu güzelce {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, vb. öğe ve niteliklerle işaretledikten sonra ne yazık ki pek iyi görünmüyor.(Tablonun HTML versiyonunu görmek için <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> sayfasına bakın.):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>Yalnızca varsayılan tarayıcı stili ile sıkışık, okunması zor ve sıkıcı görünüyor. Bunu düzeltmek için biraz CSS kullanmamız gerekiyor.</p> + +<h2 id="Tablomuzu_şekillendirmek">Tablomuzu şekillendirmek</h2> + +<p>Tablo örneğimizi birlikte şekillendirmeye çalışalım.</p> + +<ol> + <li>Başlangıç olarak, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">kaynak kodları</a> ve iki adet resmi(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>) bilgisayarınıza indirin. İndirmiş olduğunuz üç dosyayıda bilgisayarınıza bir klasöre kopyalayın.</li> + <li>Ardından, adı <code>style.css</code> olan bir dosya oluşturun ve diğer indirmiş olduğunuz dosyalarla aynı klasörün içerisine kaydedin.</li> + <li>Aşağıdaki HTML satırını sayfanızın içine yerleştirerek CSS'i {{htmlelement("head")}} etiketi içerisinde HTML'ye bağlayın. + <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet" type="text/css"></pre> + </li> +</ol> + +<h3 id="Aralık_ve_düzen">Aralık ve düzen</h3> + +<p>Yapmamız gereken ilk şey, tablonun düzenini ve hücreler arasındaki aralığı tanımlamak - varsayılan tablo stili çok sıkışık! Bunu yapmak için aşağıdaki CSS'yi <code>style.css</code> dosyasına eklemelisin:</p> + +<pre class="brush: css notranslate">/* spacing */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p>Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibidir:</p> + +<ul> + <li>Bir {{cssxref("table-layout")}} niteliğine atanan <code>fixed</code> değeri tablonun daha öngürülebilir davranmasına sağlayarak çalışma alanımızda daha iyi bir ortam oluşturmuş oluruz. Normalde, tablo sütunları içerdikleri içeriğe göre boyutlandırılma eğilimindedirler ve bu da bazı garip sonuçlar doğurabilir. Biz de <code>tablo-layout: fixed</code> ile sütunlarımızı başlıkların genişliğine göre boyutlandırmış oluruz. Bu sāyede içeriklerle uygun şekilde ilgilenebiliriz. Daha sonra <code>thead th:nth-child(<em>n</em>)</code> bildirmiyle {{htmlelement("thead")}} öğemizin {{htmlelement("th")}} çocuklarını sırasıyla seçebilmek için {{cssxref(":nth-child")}} sözde öğe seçimizle başlıklarımızın genişliklerini yüzdelik olarak belirliyoruz. Sütun genişliklerinin tamamı başlıkların genişliklerine göre ayarlamak tablo sütunlarını boyutlandırmanın güzel bir yoludur. Chris Coyier bu tekniği daha ayrıntılı olarak ele aldığı <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a> makâlesinin çevirisine bakabilirsiniz.</li> + <li>Tablo genişliğini {{cssxref("width")}} niteliğine 100% uzunluk değeri vererek tablonun içinde bulunduğu kutunun genişliği kadar genişlik alması sağlandı(Her ne kadar dar ekranlarda genişliğin üzerinde biraz daha ek çalışmaya ihtiyaç duysa da)</li> + <li>{{cssxref("border-collapse")}} niteliğine <code>collapse</code> değeri atayarak tablonun sınır çizgisi tek çizgi olacak şekilde ayarlanıyor. Varsayılan olarak, tablo öğelerinde kenarlık ayarladığınızda, aşağıdaki resimde gösterildiği gibi, çizgilerin arasında boşuklar olacaktır: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Bu hoş bir görüntü oluşturmuyor(belgide istediğin bu görüntü olabilir, benimki bu değildi) <code>border-collapse: collapse;</code> bildirimi kenarlıkları teke indiriyor ve bu çok daha iyi görünüyor:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{cssxref("border")}} niteliğimizle tablonun etrafına bir kenarlık koyduk, çünkü daha sonra tablo başlığının ve altbilginin etrafına bazı kenarlıklar koyacağız — etrafını çevreleyen bir sınır olmadığında gerçekten tuhaf ve kopu görünür.</li> +</ul> + +<p>Bu noktada, tablomuz biraz daha iyi görünür:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Basit_bir_tipografi">Basit bir tipografi</h3> + +<p>Şimdi metnimizi biraz şekillendirelim.</p> + +<p><a href="https://www.google.com/fonts">Google Fonts</a>'da punk gruplarına uygun bir yazı tipi bulduk. İstersen oraya gidip farklı bir tane bulabilirsin; bunun için {{htmlelement("link")}} etiketinin {{cssxref("font-family")}} beyanına Google Fonts'un verdiği tanımını eklemelisin.</p> + +<p>Öncelikle, aşağıdaki {{htmlelement("link")}} etiketini HTML başlığınıza, css dosya <code><link></code> tanımının hemen üstüne eklemelisin:</p> + +<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> + +<p>Şimdi, aşağıdaki CSS'i <code>style.css</code> dosyasının önceki eklemenin altına eklemelisin:</p> + +<pre class="brush: css notranslate">/* typography */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p>Bu son tanımda tablolara özgü birşey yok; genelde yazı tipi stilini okumayı kolaylaştırmak için değiştiriyoruz.</p> + +<ul> + <li>Genel bir sans-serif yazı tipi kümesi belirledik; bu tamamen biçimsel bir seçimdir. Ayrıca hoş bir eski/serseri bir görünüm için özel yazı tipimizi {{htmlelement("thead")}} ve {{htmlelement("tfoot")}} etiketleri içindeki başlıklara tanımladım.</li> + <li>{{cssxref("letter-spacing")}} niteliğimizi okunabilirliliğe yardımcı olduğunu düşündüğüm için başlıklara ve hücrelere tanımladım. Bu da stilistik bir seçim.</li> + <li>Tablodaki {{htmlelement("tbody")}} etiketi içerisindeki hücrelerin içeriklerini, başlıklarla aynı hizaya gelecek şekilde ortaladım. Varsayılan olarak hücrelerin {{cssxref("text-align")}} nitelik değeri <code>left</code> olarak gelir. Ancak başlıkların varsayılan değerleri <code>center</code> olarak gelmektedir. Genellikle hizalamaların her ikisi için de aynı olması daha iyi görünür. Başlık yazı tiplerindeki varsayılan kalınlık görünümlerinin farklılaştırmak için yeterlidir. Bunun için ayrı bir tanım yapma ihtiyacımız bu örnek için bulunmamakta.</li> + <li>{{htmlelement("tfoot")}} etiketimizdeki veri hücresiyle başlığın daha iyi ilişkilendirilmesi için başlığı sağa hizaladım. Veri hücresi varsayılan olarak zaten sola dayalı.</li> +</ul> + +<p>Sonuç biraz daha düzgün görünüyor:</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Grafikler_ve_renler">Grafikler ve renler</h3> + +<p>Sıra grafikler ve renkler de! Tablomuz serseri bir tavırla dolu olduğu için, ona uyması için parlak, heybetli bir stil vermemiz gerekiyor. Endişelenmeyin, tablolarını bu kadar gürültülü yapmak zorunda değilsin — daha sade ve zevkli bir tasarım tercik edebilirsin.</p> + +<p>Aşağıdaki CSS'i <code>style.css</code> dosyanıza eklemelisin:</p> + +<pre class="brush: css notranslate">/* graphics and colors */ + +thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>Burada da tablolara özgü bir tanım yok, ancak birkaç noktayı not etmeye değer.</p> + +<p>{{htmlelement("thead")}} ve {{htmlelement("tfoot")}} özelerimize, {{cssxref("background-image")}} niteliği ile bir arka plan resmi ekledim, ayrıca okunabilirliliğin daha iyi olması için üst ve alt bilgi alanlarındaki tüm metinlerin rengini beyaz yapıp, {{cssxref("text-shadow")}} ile gölgelendirme verdim ({{cssxref("text-shadow")}}. Metninizin her zaman arka planla kontrastı iyi olduğundan emin olmalısınki okunabilsin.</p> + +<h4 id="Zebra_çizgisi">Zebra çizgisi</h4> + +<p><strong>Zebra çizgilerinin</strong> nasıl oluşturulup uygulanacağını göstermek için ayrı bir bölüm ayırmak istedim — tablonuzdaki farklı veri satırlarının ayrıştırılmasını ve okunmasını kolaylaştıran alternatif renk satırları. Aşağıdaki CSS'i <code>sytle.css</code> dosyasına eklemelisin:</p> + +<pre class="brush: css notranslate">/* zebra striping */ + +tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>Daha önce, {{cssxref(":nth-child")}} seçicinin belirli alt öğeleri seçmek için kullanıldığını gördün. Parametre olarak bir formül de verilerek bir dizi öğe seçebilir. Formül <code>2n-1</code> ile tüm tek sayılı çocukları (1, 3, 5, vb), <code>2n</code> formülü ilede tüm çift sayılı çocukları (2, 4, 6, vb) seçer. Fakat kodumuzda <code>odd</code>(tek) ve <code>even</code>(çift) anahtar kelimelerini kullandık, yukarıda belirtilen formüllerle aynı işlemi yaparak, tek ve çift sıralara farklı renkler veriyoruz.</li> + <li>Ayrıca, tüm gövde sıralarına tekrar eden bir arka plan döşemesi ekledim, bu şekilde tablomuza yarı saydam bir doku kazandırmış oldum.</li> + <li>Son olarak, tüm tabloya düz bir arka plan rengi verdim ki <code>:nth-child</code> seçicisini desteklemeyen tarayıcılarda tablomuzun halen bir arka plan rengi olabilsin.</li> +</ul> + +<p>Bu renk cümbüşü aşağıdaki görünüme neden olur:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>Bu biraz abartılı gelebilir ve zevkine göre olmayabilir. Ama burada değinmeye çalıştığımız nokta, tabloların sıkıcı ve akademik olmak zorunda olmadığıdır.</p> + +<h3 id="Başlığın_stilini_ayarlamak">Başlığın stilini ayarlamak</h3> + +<p>Tablomuzda yapmamız gereken son bir şey daha var — başlık stili vermek. Bunu yapmak için aşağıdakileri <code>style.css</code> dosyasına eklemelisin.</p> + +<pre class="brush: css notranslate">/* caption */ + +caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>Burada <code>bottom</code> değeri verilen {{cssxref("caption-side")}} niteliği başlığın tablonun nesinde olacağını tanımlamamıza yardımcı olur. Bu bildirim, başlığın tablonun altına yerleştirilmesine neden olur ve bu da diğer bildirimlerle birlikte bize bu son görünümü verir(<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> görmek için bakın):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="Tablo_şekillendirme_için_hızlı_ipuçları">Tablo şekillendirme için hızlı ipuçları</h2> + +<p>Devam etmeden önce, size yukarıda gösterilen en yarlı noktaların hızlı bir listesini vermem gerektiğini düşümdüm:</p> + +<ul> + <li>Tablo işaretlemeni olabildiğince basit hale getirmelisin; örneğin yüzdeleri kullanarak işleri esnek tutmalısın, böylece tasarımın daha duyarlı olsun.</li> + <li>{{cssxref("table-layout")}}<code>: fixed;</code> bildirimini kullanarak sütun genişliklerini({{cssxref("width")}}) başlıklarının({{htmlelement("th")}}) genişliğine ayarlanmasını sağlayarak daha tahmin edilebilir bir tablo düzeni oluşturabilirsin.</li> + <li>{{cssxref("border-collapse")}}<code>: collapse;</code> kullanarak daha sāde kenarlıklar eklemelisin.</li> + <li>{{htmlelement("thead")}}, {{htmlelement("tbody")}}, ve {{htmlelement("tfoot")}} etiketlerini kullanarak ve böylece mantıksal alanlara bölerek oluşturduğun tablo üzerinde daha fazla CSS uygulamak için imkan sağlamış olursun.</li> + <li>Satırların birbirinden ayrılıp daha rahat okunabilemesi için zebra çizgisini kullanın.</li> + <li>{{htmlelement("th")}} and {{htmlelement("td")}} öğelerinde takip etmeyi kolaylaştırmak için {{cssxref("text-align")}} niteliğini kullanmaktan çekinmemelisin.</li> +</ul> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks">Becerilerini test et: Tablolar</a>.</p> + +<h2 id="Sıradaki">Sıradaki</h2> + +<p>Artık tabloları şekillendirmeyi de öğrenmişken, zamanımızı işga ledecek başka bir şeye ihtiyacımız var. Sonraki dersimizde, CSS'de hata ayıtlamayı araştırıyor olacağız — olması gerektiği gibi görünmeyen düzenler veya olması gerektiğini düşündüğünüzde uygulanmayan özellikler gibi sorunların nasıl çözüleceği. Bu, sorunlarınıza çözüm bulmak için tarayıcı DevTools'u kullanma hakkındaki bilgileri içerir.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> +</ol> |