Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir konuşmacının sunduğu eğitim içeriğidir ve Bootstrap ile HTML tablolarının nasıl kullanılacağını anlatmaktadır.
- Video, iki ana bölümden oluşmaktadır. İlk bölümde Bootstrap ile responsive tabloların oluşturulması, temel HTML tablo yapısı (table, tr, th, td, tfoot) ve Bootstrap'in table class'ı kullanılarak tabloların responsive hale getirilmesi gösterilmektedir. İkinci bölümde ise HTML tablolarında caption kullanımı, "caption" etiketinin kullanımı ve caption'ın tablonun hangi kısmında görünmesini istediğimizi belirtmek için "caption-top" özelliğinin kullanımı anlatılmaktadır.
- Video, Bootstrap ile tabloların temel özelliklerini, düzenlemelerini ve caption kullanımını öğrenmek isteyenler için adım adım örnekler sunmaktadır. Konuşmacı, bu derste hemen hemen her şeye değinildiğini belirterek, tablolar konusunun uzun olduğunu ifade etmektedir.
- 00:07Bootstrap Tablolar ve Responsive Tasarım
- Bootstrap serisinde tablolar konusuna geçildi ve tabloların responsive bir şekilde tasarlanabilmesi için gerekli olanlar anlatılacak.
- Table'lar için tek bir class kullanılır: "table". Bu class ile responsive tasarım oluşturulabilir.
- Table yapısı için "table", "thead" (table head), "tbody" (table body) ve "tfoot" (table footer) etiketleri kullanılır.
- 01:10Table Yapısı ve Temel Özellikler
- Table yapısında "thead" etiketi başlık kısmını, "tbody" etiketi verileri içeren kısmını, "tfoot" etiketi ise tablonun alt kısmını oluşturur.
- "table" class'ı kullanıldığında normal HTML tablosu responsive hale gelir ve kaydırma özelliği kazanır.
- Table yapısında "table-hover" class'ı, üzerine gelindiğinde hangi satırda olduğunuzu gösteren özellik sunar.
- 04:46Table Renk ve Stil Özellikleri
- Table'ın renkli olmasını isteyenler için "table-primary", "table-danger" gibi renk class'ları kullanılabilir.
- Renk class'ları sadece table için değil, "tr" veya "td" gibi satır ve hücre etiketlerine de uygulanabilir.
- "table-bordered" class'ı tüm kenarları çizgili yaparken, "table-borderless" class'ı kenar çizgilerini kaldırır.
- 07:50Table Boyut ve Zebra Deseni
- Table'ın boyutunu değiştirmek için "table-sm" (küçük) veya "table-lg" (büyük) class'ları kullanılabilir.
- "table-striped" class'ı, tabloya zebra deseni (zebra deseni) ekler ve satırları aralarında renk değiştirmeyi sağlar.
- Tabloda sütun birleştirme için "colspan" özelliği kullanılabilir, örneğin "colspan=2" ile bir hücrein iki sütun genişliğinde olması sağlanabilir.
- 10:34Table Diğer Özellikleri
- "table-active" class'ı, belirli bir satırın veya hücrenin her zaman aktif görünmesini sağlar.
- Table yapısında "thead" (tablo başlığı), "tbody" (tablo vücutu) ve "tfoot" (tablo altı) kısımları bulunur.
- 11:34Table Caption Kullanımı
- Table'ın ne ile ilgili olduğu bilgisini vermek için caption kullanılır, örneğin "sınıftaki öğrenciler" şeklinde.
- Caption eklemek için table'dan hemen sonra caption etiketi kullanılır ve içine açıklama yazılır.
- Caption default olarak tablonun altına yerleştirilir ve küçültüldüğünde kendini hizalayarak otomatik olarak küçülür.
- Caption'ı tablonun üst kısmına yerleştirmek için "caption top" özelliği kullanılır.