HTML ile Ürün Kataloğu Nasıl Yapılır?

Tablolar, HTML'de çevrimiçi bir katalog oluşturmanın en basit yöntemini sağlar. Üç sütunlu bir tablo size bir ürün resmi, açıklaması ve nakliye/sipariş bilgileri için yer sağlar. Tablolara bilgi eklemek, metni doğrulamak için gereken süreyi azaltır. Ayrıca tablolar, web sitenizin görünümünü ve netliğini artırmak için sayfanızdaki bilgileri çevreleyen beyaz alanı kontrol etmenizi sağlar.

Aşama 1

Açıklığı kullanarak tek piksel kenarlıklı bir tablo tanımlayın

etiket:

Günün Videosu

Adım 2

Bu kodla ilk hücre satırını ve içeriklerini ekleyin:

Aşama 3

İkinci hücre satırını ve içeriklerini bu kodla ekleyin:

4. Adım

Tabloyu bitiş etiketiyle kapatın:

Bu, ilk öğenin açıklamasıdır. Bu öğe şu anda mevcuttur.
Bu, ikinci öğenin açıklamasıdır. Bu ürün ön siparişte.

Bu basit örnek, iki satır ve üç sütunlu bir tablo üretir. İlk sütun, etiketi kullanan ürünün 60 x 60 piksellik bir görüntüsünü görüntüler. İkinci ve üçüncü sütunlar, ürün açıklamasını ve stok bilgilerini görüntüler. Her satırın etiketle başlayıp bittiğine ve satırdaki her öğenin bir etiketle başlayıp bittiğine dikkat edin. Ürününüzü tanımlamak için ihtiyaç duyduğunuz kadar sütun veya satır ekleyin.

Tablonun sınırları ile içeriğiniz arasındaki boşluk miktarını artırmak için tablo tanımındaki kenarlık belirtiminden hemen sonra cellpadding komutunu ekleyin. Örneğin,

tablodaki her hücrenin içeriğinin etrafında 10 piksellik bir beyaz boşluk oluşturur.

Referanslar

  • W3Schools.com: HTML Tabloları