Tablo Başlıklarının Önemi Nedir?
'Tablo başlıkları', kullanıcının her bir tablonun ne anlama geldiğini ve içerdiği verileri nasıl kullanacağını tanımlayabilmesi için tablolara başlık vermek için kullanılır. Altyazılar, bir web sayfasındaki tabloları numaralandırarak içlerindeki verileri daha erişilebilir hale getirmeye de yardımcı olabilir.
Altyazılar, çok sayıda tablonun bulunduğu bir belgedeki veya web sayfasındaki her tabloya tam bağlam verir. Ayrıca, yapılandırılmış altyazılar, okuyucuların her tabloda hangi verilerin bulunduğunu hızlı bir şekilde anlamalarını sağlar.
Tailwind CSS'de Tablo Başlığı Nasıl Kullanılır?
Tailwind CSS'de, tabloya “ kullanılarak bir resim yazısı eklenir.
Örnek: Tablonun Hem Üstüne hem de Altına Tablo Başlığı Ekleme
Aşağıdaki kodda, tablonun hem üstüne hem de altına aşağıdaki gibi bir “başlık” ekleyeceğiz:
< masa >
< masa sınıf = 'min-w-full border border-gri-300 böl-y böl-gri-300' >
< baş belası >
< tr >
< inci sınıf = 'py-2 px-4 bg-gri-100 sınır-b' >
İsim
< / inci >
< inci sınıf = 'py-2 px-4 bg-gri-100 sınır-b' >
E-posta
< / inci >
< inci sınıf = 'py-2 px-4 bg-gri-100 sınır-b' >
İD
< / inci >
< inci sınıf = 'py-2 px-4 bg-gri-100 sınır-b' >
Temas etmek
< / inci >
< / tr >
< / baş belası >
< iki vücut >
< tr >
< td sınıf = 'py-2 px-4 sınır-b' > James < / td >
< td sınıf = 'py-2 px-4 sınır-b' > james@tsl.com < / td >
< td sınıf = 'py-2 px-4 sınır-b' > 61101-1234567-8 < / td >
< td sınıf = 'py-2 px-4 sınır-b' > 123-456-7890 < / td >
< / tr >
< tr >
< td sınıf = 'py-2 px-4 sınır-b' > Michael < / td >
< td sınıf = 'py-2 px-4 sınır-b' > michael@tsl.com < / td >
< td sınıf = 'py-2 px-4 sınır-b' > 61101-8765432-1 < / td >
< td sınıf = 'py-2 px-4 sınır-b' > 098-765-4321 < / td >
< / tr >
< tr >
< td sınıf = 'py-2 px-4 sınır-b' > Davut < / td >
< td sınıf = 'py-2 px-4 sınır-b' > David@TSL.com < / td >
< td sınıf = 'py-2 px-4 sınır-b' > 54791-1234567-8 < / td >
< td sınıf = 'py-2 px-4 sınır-b' > 123-786-4290 < / td >
< / tr >
< tr >
< td sınıf = 'py-2 px-4 sınır-b' > Peter < / td >
< td sınıf = 'py-2 px-4 sınır-b' > peter@tsl.com < / td >
< td sınıf = 'py-2 px-4 sınır-b' > 54300-1234567-8 < / td >
< td sınıf = 'py-2 px-4 sınır-b' > 611-239-7890 < / td >
< / tr >
< / iki vücut >
< altyazı >
Çalışanların Kişisel Bilgileri
< / altyazı >
< / masa >
< altyazı >
Şirketin adı
< / altyazı >
Yukarıdaki kodda şu adımları izleyin:
- “ kullanarak bir tablo oluşturun
' etiket. - Hizmet sınıfı aracılığıyla tablo biçimlendirmesini belirtin.
- 'Ad', 'Email', 'ID' ve 'Contact' tablo başlıklarını '' aracılığıyla tanımlayın. ' etiket.
- Tablodaki 4 personelin tümü için verileri “” kullanarak tanımlayın. ' ve '
” etiketleri. - Ardından, “ kullanarak tablo başlığını belirtin.
” etiketi ile tabloyu kapatın. - Son olarak tablonun altına tablo başlığı uygulamak için sonuna bir “
” etiketi daha ekliyoruz. - Not : Öyle ki tablonun üst başlığı “
” etiketi içinde, alt başlığı ise tablo kapanış etiketinden sonra belirtilmesi gerekiyor.
Çıktı
Çözüm
Tabloların başlıkları, tablolar ve içerdikleri veriler hakkında daha fazla bilgi vermek için çok önemlidir. Sonuç olarak, tablolara erişilebilirlik hem kullanıcılar hem de okuyucular için artırılmıştır. Başlık, bir tabloyla ilgili olarak çevrimiçi açıklamada da görüntülenebilecek özlü bir şekilde fazladan bilgi sağlar.
- Tablodaki 4 personelin tümü için verileri “” kullanarak tanımlayın. ' ve '