From 8f2731905212f6e7eb2d9793ad20b8b448c54ccf Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:31 +0100 Subject: unslug tr: move --- .../css/building_blocks/styling_tables/index.html | 330 +++++++++++++++++++++ 1 file changed, 330 insertions(+) create mode 100644 files/tr/learn/css/building_blocks/styling_tables/index.html (limited to 'files/tr/learn/css/building_blocks/styling_tables/index.html') 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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
+ +

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.

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:HTML tablolarının nasıl etkili bir şekilde biçimlendirileceğini öğrenmek.
+ +

Standart bir HTML tablosu

+ +

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.

+ +
<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>
+ +

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 punk-bands-unstyled.html sayfasına bakın.):

+ +

+ +

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.

+ +

Tablomuzu şekillendirmek

+ +

Tablo örneğimizi birlikte şekillendirmeye çalışalım.

+ +
    +
  1. Başlangıç olarak, kaynak kodları ve iki adet resmi(noise ve leopardskin) bilgisayarınıza indirin. İndirmiş olduğunuz üç dosyayıda bilgisayarınıza bir klasöre kopyalayın.
    2. +
  2. Ardından, adı style.css olan bir dosya oluşturun ve diğer indirmiş olduğunuz dosyalarla aynı klasörün içerisine kaydedin.
    3. +
  3. 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. + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Aralık ve düzen

+ +

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 style.css dosyasına eklemelisin:

+ +
/* 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;
+}
+ +

Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibidir:

+ + + +

+ + + +

Bu noktada, tablomuz biraz daha iyi görünür:

+ +

+ +

Basit bir tipografi

+ +

Şimdi metnimizi biraz şekillendirelim.

+ +

Google Fonts'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.

+ +

Öncelikle, aşağıdaki {{htmlelement("link")}} etiketini HTML başlığınıza, css dosya <link> tanımının hemen üstüne eklemelisin:

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Şimdi, aşağıdaki CSS'i style.css dosyasının önceki eklemenin altına eklemelisin:

+ +
/* 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;
+}
+ +

Bu son tanımda tablolara özgü birşey yok; genelde yazı tipi stilini okumayı kolaylaştırmak için değiştiriyoruz.

+ + + +

Sonuç biraz daha düzgün görünüyor:

+ + + +

+ +

Grafikler ve renler

+ +

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.

+ +

Aşağıdaki CSS'i style.css dosyanıza eklemelisin:

+ +
/* 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;
+}
+
+ +

Burada da tablolara özgü bir tanım yok, ancak birkaç noktayı not etmeye değer.

+ +

{{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.

+ +

Zebra çizgisi

+ +

Zebra çizgilerinin 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 sytle.css dosyasına eklemelisin:

+ +
/* 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;
+}
+ + + +

Bu renk cümbüşü aşağıdaki görünüme neden olur:

+ +

+ +

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.

+ +

Başlığın stilini ayarlamak

+ +

Tablomuzda yapmamız gereken son bir şey daha var — başlık stili vermek. Bunu yapmak için aşağıdakileri style.css dosyasına eklemelisin.

+ +
/* caption */
+
+caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

Burada bottom 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(punk-bands-complete.html görmek için bakın):

+ +

+ +

Tablo şekillendirme için hızlı ipuçları

+ +

Devam etmeden önce, size yukarıda gösterilen en yarlı noktaların hızlı bir listesini vermem gerektiğini düşümdüm:

+ + + +

Becerilerini test et!

+ +

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. Becerilerini test et: Tablolar.

+ +

Sıradaki

+ +

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.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}

+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de öğelerin boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'inizi düzenleme
    13. +
-- cgit v1.2.3-54-g00ecf