Web tasarımının temelleri: Şık tablolar nasıl oluşturulur ve ne zaman kullanılır?

Tablolar ne zaman web sayfalarında veri sunmada en etkili? Tabloların uygun kullanımı hakkındaki tartışmalar genellikle sayfa düzeni için tablo sütunu ve satır niteliklerinin kullanımına ve bunları metin, grafik veya degradeleri hizalamak veya konumlandırmak için kullanmaya odaklanır. Bölümler, açıklıklar ve daha yakın zamanda HTML5 ile, makalelerin, bölümlerin, üstbilgilerin, altbilgilerin, gezinme, hgroup ve bir yana kullanımı, web sayfası sunumu için kesitsel ve yapısal öğeler sağlamak için daha uygundur.

Ancak, tablolar içeriği düzenlemek için uygun olmasa da, web sayfalarında, özellikle bilimsel raporlar, tablo verileri ve standart bir elektronik tablo biçiminde iyi temsil edilen veriler için önemli verileri sunmak için yararlı bir araçtır. Tablo biçimlendirmesine iyi uyum sağlayan veri kaynaklarına ve türlerine örnek olarak virgülle ayrılmış listeler, tablo verileri, veritabanları ve sorgulanabilecek diğer kaynaklar verilebilir. Oracle, MySQL, SQL Server, MS Access ve MS Excel'deki virgülle ayrılmış değer dosyası veya .csv gibi. Sekmeli veriler, MS Word ve WordPerfect gibi kelime işlemci uygulamaları gibi diğer kaynaklardan da içe aktarılabilir.

Bu makalede, web sayfası sunumu için tablo biçiminde veri içe aktarma ve biçimlendirme özelliklerini göstermek için Adobe Dreamweaver'a özgü özellikler kullanacağım; ancak, benzer sonuçlara sahip diğer metin editörlerinde de benzer yöntemler kullanılabilir.

Tabloların düzenli kullanımlarından biri - özellikle bilim insanı ekiplerini destekleyen web siteleri için - verileri düzenli olarak, bazen haftalık veya günlük olarak güncellemek; Tabii ki bu, veritabanına dayalı web siteleriyle otomatik olarak yapılabilir, ancak bazen veriler uygun arka uç veritabanı biçiminde kolayca bulunmaz.

Verileri içe aktarma

Tablo şeklinde veriler sınırlandırılmıştır, yani virgül, boşluk veya noktalı virgül gibi ortak bir ayırıcıyla ayrılmış, her bir kaydı oluşturan her kaydı oluşturan ayrı veri parçalarına sahiptir. Aşağıdaki örnek veriler, her kaydın virgülle nasıl sınırlandığını veya ayrıldığını gösterir ve bunlar ayrı ayrı veri parçalarını kayıt içinde ayırmak için kullanılır.

Yıl, Marka, Model, Açıklama, Fiyat

 1997, Ford, E350, "ac, abs, ay", 3000.00 
 1999, Chevy, "Girişim" "Genişletilmiş Baskı" "", "", 4900.00 
 1999, Chevy, "Venture" "Genişletilmiş Baskı, Çok Büyük" "", "", 5000.00 
 1996, Jeep, Grand Cherokee, "İyi Durum! Hava, ay çatısı, yüklü", 4799.00 

Bu, virgülle ayrılmış değer (CSV) e-tablosuna içe aktarılan verilerle aynıdır:

Şekil A

Herhangi bir yanlış virgül, verilerin kayıttaki başka bir parça olarak yorumlanmasına neden olur. Dreamweaver uygulamasına içe aktarıldıktan sonra, sekmeli veriler sıralanabilen, biçimlendirilebilen ve hatta dışa aktarılabilen HTML biçimli bir tablo haline gelir. Yüzlerce satırlık kaydın ve tüm bu verileri manuel olarak girmenin bir kabus olacağını düşünün, ancak Dreamweaver Verileri İçe Aktar özelliğiyle, sekmeli verilerin biçimlendirilmesi sadece birkaç dakika sürer.

Dreamweaver'da, güncelleştirmek istediğiniz dosyanın açık olduğundan emin olun ve ardından Dosya | İthalat | Tablo Verileri.

Şekil B

Bu, Şekil B'de, kaynak konuma göz atarak hangi dosyayı içe aktarmak istediğinizi belirtmenize ve ardından verilerin sekme, virgül, noktalı virgül, iki nokta üst üste olarak nasıl sınırlandırıldığını onaylamanıza olanak veren Sekmeli Verileri İçe Aktar iletişim kutusunu açar., veya diğeri. Tablonun hücre aralığı, hücre dolgusu, üst satır biçimlendirmesi ve kenarlıkla nasıl görünmesini istediğinizi seçeceksiniz. İşiniz bittiğinde, Tamam'ı tıklatın; tablo, içe aktarılan verilerle oluşturulur. İçe aktarıldığında, Şekil C'de gösterildiği gibi tablonun görünüşü budur.

Şekil C

Veriler bir web belgesine bu şekilde tablo olarak içe aktarıldıktan sonra artık harici dosyaya bağlanmaz; bu nedenle, harici dosyada yapılan hiçbir güncelleme HTML belgesine yansıtılmaz. MySQL veya Oracle veritabanı gibi bir veritabanı arka uç kaynağından verilere doğrudan çağrı yapılması, bu makalenin kapsamı olmayan verilerin dinamik olarak güncellenmesini sağlayacaktır.

Verileri dışa aktarma

Kullanabileceğiniz diğer bir seçenek Dışa Aktarma Aracıdır . Önce tabloyu vurgulayıp ardından Dosya | 'ı seçerek Dreamweaver'daki herhangi bir web belgesinden bir tablo seçin. İhracat | Aşağıdaki tabloda gösterildiği gibi, sınırlayıcı türünü (sekme, virgül vb.) Ve uygulanması gereken satır sonları türünü (Windows, Mac, Unix) seçin ve seçin.

Şekil D

Verileri sıralama

Verileri web belgesine aktardıktan sonra, artık projenin ölçeğine bağlı olarak verileri sıralayabilirsiniz. Sıralama prosedürüne başlamak için Dreamweaver uygulamasındaki etkin imleci tablonun herhangi bir bölümüne getirin, ardından menüden Komutlar | Tabloyu Sırala.

Şekil E

Tabloyu Sırala iletişim kutusunda, sütunlara göre sırala, sıralamanın alfa veya sayısal olarak nasıl sıralanacağı ve sıralamanın yönü gibi birçok seçenek vardır. Birincil ve ikincil sıralamaya izin verecek iki veri sütununa göre sıralamayı da seçebilirsiniz. Diğer seçenekler arasında ilk satırı ekleme, üstbilgi satırlarını sıralama, altbilgi satırlarını sıralama ve sıralama tamamlandıktan sonra tüm satır renklerini aynı tutma sayılabilir.

Bu örnekte, sütun 1'i sayısal olarak azalan sırada, ardından sütun 2'yi aşağıda gösterildiği gibi artan sırada sıralamayı seçtim.

Şekil F

Ortaya çıkan tablo aşağıda gösterildiği gibi sıralanır.

Şekil G

Tabloları biçimlendirme

Temel tabloya içe aktarılan ve sıralanan sekmeli verilerle, artık Dreamweaver'daki Tabloyu Biçimlendir komutunu kullanarak bazı biçimlendirme uygulayabiliriz. Etkin imleç tablodayken Komutlar | Tabloyu Biçimlendir.

Şekil H

Tabloyu biçimlendirmek için satır renkleri, etiketler için üst satır hizalaması, üst satır metin stili, üst satır arka plan rengi ve üst satır metin rengi dahil olmak üzere birçok seçenek vardır. Başka bir biçimlendirme seçeneği, sol sütunu hizalama ve metin stiliyle biçimlendirmektir. Tablo kenarlığı boyutu da özelleştirilebilir; buna ek olarak, tüm stil niteliklerini TR etiketleri yerine TD etiketlerine uygulamayı seçebilirsiniz. Bu, seçilen biçimlendirmenin satır etiketi içinde merkezileştirmek yerine her bir hücrenin satır spesifik niteliklerine uygulanacağı anlamına gelir.

Bu örnekte, varsayılanın çoğunu seçtim, ancak üst satırdaki metin stilini kalın olarak güncelledim ve kenarlığı 1 olarak değiştirdim ve ardından Uygula ve Tamam'ı tıklattım. Ortaya çıkan tablo formatı aşağıda görüntülenir.

Şekil I

Bir dakikadan daha kısa sürede tamamlanan başka bir format seçimine bir örnek.

Şekil J

Sekmeli verilerin anında güncellemeleri için Dreamweaver, sınırlandırılmış veri kaynaklarından içe aktarma için bir cazibe gibi çalışır ve ardından sıralama ve biçimlendirme, birkaç şık görünümlü tablo oluşturmak için sadece birkaç dakika sürer. Gelecekteki bir makalede, tbody'ye nth-child özelliklerini atamak ve veri tabloları için stil oluşturmak için CSS3'ü gözden geçireceğim.

© Copyright 2020 | mobilegn.com