HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html tablo oluşturma
html tablo yapma
html tablo ekleme kodu
html tablo oluşturma kodu
html add table border
html table width
html table kullanımı
html table example
html table tr border
html table tr height
html table tr td border
html table tr td
html td tr th
html table th width
html table th border
html table th td
html table td width
html table td align
html table td example
html table align border
html table align right
html table width border
html table height and width code
html table height align
html table height tag
html table border width
html table cellspacing alternative
html table cellpadding left
html table colspan border
html table rowspan colspan

HTML Tablo Ekleme(Add a Table)

HTML Tablo Ekleme(Add a Table)
Html
<table border="1" height="100" width="200" cellspacing="7" cellpadding="5">


      <tr>


         <td align="center" colspan="2">satır 1, sütun 1 ve 2 birleşti</td>


      </tr>


      <tr>


         <td rowspan="2">satır 2 ve 3 birleşti, sütun 1</td>


         <td>satır 2, sütun 2</td>


      </tr>


      <tr>


         <td>satır 3, sütun 2</td>


      </tr>


</table>

Web sayfanıza berki tablo ekleme ihtiyacınız olmayabilir ama olmasa bile html dilinin en temel parçası olan tablo oluşturmayı bilmeniz gerekiyor.Tablonun kodlamasını yaparken biraz kafanız karışabilir o yüzden en çok bu dersle ilgili kod editörümden yada kendiniz not defterinden tekrarlar yapın.

İlk olarak <table></table> etiketi ile başlayacağız.Bu etiketin arasına yine değişik etiketleri yazarak tablomuzu oluşturucağız. Bunu anlatarak açıklamayacağım kod editörümdeki örneğe bakarsanız zaten herşeyi anlıyacaksınız. Ben size bu etiketlerin açıklamarını baştan sona yazayım..

Etiketler

<table> : En dışta bulunan tablonun başlangıcını ve bitişini gösteren etiket.

<tr>: Tablonuza satır eklemek için kullanılır.

<th>: Tablonuza başlık sütunu eklemek için kullanılır. Örneğin: İsim

<td>: Tablonuza sütun eklemek için kullanılır.

Tablomuzu temel olarak bu etiketlerle oluşturuyoruz. Bir de tablomuzu biraz daha özelleştirmek için parametrelerimiz var.

Parametreler

align: Yazdığınız etiketteki içeriği(Yazı,resim,vb) left,right,center gibi değerler alarak sağa,sola yaslamanızı yada ortalamanızı sağlar yani hizalamasını ayarlar.

width: Yazdığınız etiketin genişliğini ayarlar.

height: Yazdığınız etiketin yüksekliğini ayarlar.

border: Yazdığınız etikete kenarlık ekler.Sayı değerleri ile çizginin kalınlığını ayarlarsınız.Genelde table etiketinde kullanılır.

Not: Eğer bu parametreyi table etiketine eklemesseniz tablonuzun kenarlığı olmayacak fakat düzenide bozulmayacaktır. Eğer border değerini 0 verirseniz yine kenarlığı olmayacaktır. İkinci olarak height ve width etiketleri sadece yine table etiketinde çalışmaktadır.

cellspacing : Sütunlar arası kenar boşluğunu ayarlar. 

cellpadding: Satırlar arası kenar boşluğunu ayarlar.

Not: Bu iki parametre sadece table etiketinde çalışır.

Peki iki sütünu yada satırı nasıl birleştiriceğim ?

colspan : İki yada daha fazla sütunu birleştirmenizi sağlar. Kaç sütunu birleştirmek istediğinizi değer olarak atayın.

rowspan:  İki yada daha fazla satırı birleştirmenizi sağlar. Yine kaç satırı birleştirmek istediğinizi değer olarak atayın.

Not: Bu iki parametre sadece <table> etiketinde çalışmaz.

Son olarak..

Değerli ziyaretçiler yazımın başında belirttim fakat tekrar belirtmek istiyorum. Html dilinin en zor konularından biridir tablo oluşturmak o yüzden değişik örnekler deneyin. Tablo içlerine resim ekleyin, yazı ekleyin değişik şekillerde deneyin. Kod editörümdeki örneği de incelemeyi unutmayın..



Paylaş:

Enes KILIÇ
Webmaster