WEB TABANLI KODLAMA

HTML'de bir tablonun açılışı <table> ile başlar ve </table> ile sonlanır.

HTML'de bir kod satırının açıklanması için // işareti kullanılmaktadır. // ifadesinin okuyucuya göre sol tarafı çalışan kod satırını, sağ tarafı ise ilgili kod satırının açıklamasını içermektedir

HTML'de bir verinin hücre içinde hizalanması için kullanılan işlev "text-align" işlevidir.

HTML'de biçim oluştururken bir tablo başlığı tanımlamak istersek <caption>Tablo Başlığı</caption> şeklinde bir kod yazmamız gerekir.

rowspan özelliği satırları bölmek için kullanılan bir özelliktir.

HTML kodlamasında kullanılan renkler hegzadesimal (onaltılı) sayı sistemine göredir.

"background-color: brown" ifadesi arka plan renginin kahverengi olacağını gösterir.

"td { height:30px; }" ifadesi hücre yüksekliğinin 30 pixel olduğunu belirtmektedir.

Her tabloda dört temel bileşen bulunmaktadır. Bunlar: Satır, sütun, hücre ve veridir.

<td></td> table data etiketinin arasına tabloya eklemek istediğimiz veriler yazılır

<th> table header etiketi tablonun başlıklarını belirlemek için kullanılır.

Satır (İng. row) tabloda soldan sağa yan yana geldiğinde bir
birey, grup, nesne, lokasyon, şirket vb. anlamlı bir bütüne
ait verileri içerir ve çeşitli özellikleri ile bu anlamlı bütünü
(İng. entity) tanımlar.

Sütun (İng. Column) bir satırdan diğer satıra değişebilecek
tek bir özelliğe ilişkin verileri içerir.

<table style=”width:100%”> // Web sayfasını enine (solda-sağa) tamamını kaplayacak (yüzde yüzünü) şekilde bir tablo oluşturuluyor. Burada “width:” işlevi ile genişlik bilgisi 100% olarak gönderiliyor.

<tr> …</tr> //  Table rows ifadesinin kısaltmasıdır ve tabloda bir satır oluşturur.

<td>...</td> // table data <td> etiketi daha önce <tr> ile açılan satırda bir hücre oluştur ve <td> ile </td> arasındaki veriyi ilgili hücreye yazar.

<th>...</th> // tablodaki ilgili hücrenin tablo başlığı olduğunu
belirterek koyu ve hücrenin ortasında yazılmasını sağlıyor.

Tablolarda verilerin hücrelerin içine nasıl yerleşeceği ile ilgili üç temel özellikten bahsedebiliriz bunlardan birincisi hücre kenarlığı çizgileri arasındaki boşluk “border-spacing” ile, ikincisi hücre kenarlığı ile veri arasında bırakılacak olan boşluk “padding” ile, üçüncüsü verinin hizalanması (sola, sağa, ortalı) “text-align” ile belirtilir.

Tablolarda verilerin hücrelerin içine nasıl yerleşeceği ile ilgili üç temel özellikten bahsedebiliriz bunlardan birincisi hücre kenarlığı çizgileri arasındaki boşluk “border-spacing” ile, ikincisi hücre kenarlığı ile veri arasında bırakılacak olan boşluk “padding” ile, üçüncüsü verinin hizalanması (sola, sağa, ortalı) “text-align” ile belirtilir.

border: 1px solid black; // Hücre kenarlıklarının 1 piksel kalınlığında sürekli çizgi olarak tanımlanması sağlanıyor.