Table Tagı Nasıl Kullanılır?

HTML ile tablolar oluşturmak için kullanılır.

Blok yapılarındaki web siteleri kullanılmadan önce web siteleri table tagları arasında tasarlanırdı. Bu hız sorunları ve kod ayıklama, hata bulma yüzünden artık kullanılmamaktadır.

Table Tagı Nasıl Kullanılır?

Table Tagı Nasıl Kullanılır?

Table Tagı Nasıl Kullanılır?
        <table border="1">
            <caption>Tablo Başlığı</caption>
            <colgroup>
                <col style="background-color: aqua">
                <col style="background-color: chartreuse;">
            </colgroup>
            <tr>
                <th>başlık 1, hücre 1</th>
                <th>başlık 1, hücre 2</th>
            </tr>
            <tr>
                <td>satır 1, hücre 1</td>
                <td>satır 1, hücre 2</td>
            </tr>
            <tr>
                <td>satır 3, hücre 1</td>
                <td>satır 3, hücre 2</td>
            </tr>
        </table>

Table Tag Parametleri

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

 

Table Tagı Nasıl Kullanılır?

<table border="1">
    <thead>Ders Dağılımı</thead>
    <caption align="bottom">
        Tablo 1.1: Bölümlere göre dersler
    </caption>
    <tr>
        <th>Bilgisayar</th>
        <th>Elektronik</th>
        <th>Elektrik</th>
    </tr>
    <tbody>
        <tr>
            <td>Web Tasarımı</td>
            <td>Uydu Alıcısı</td>
            <td>Çağırma Tes.</td>
        </tr>
        <tr>
            <td>Programlama</td>
            <td>İletişim Tek.</td>
            <td>Dağıtım Panoları</td>
        </tr>
    </tbody>
</table>

 

  Rowspan ve  Colspan

HTML sayfalarında tablolarda bazı hücreleri birleştirmek gerekebilir. Eğer aynı satırdaki hücreleri birleştirmek istiyorsak Colspan, aynı sütundaki hücreleri birleştirmek istiyorsak Rowspan kullanmamız gerekir.

Table Tagı Nasıl Kullanılır?

<table border="1" >
    <tr>
        <td>C</td><td>Delphi</td><td>Pascal</td></tr>
    <tr>
        <td>XML</td><td>Borland C</td><td>HTML</td>
    </tr>
    <tr>
        <td>PHP</td><td>Basic</td><td>ASP</td></tr>
</table>

 

Table Tagı Nasıl Kullanılır?
<table border="1" >
    <tr>
        <td colspan="2">Delphi</td>
        <td>Pascal</td></tr>
    <tr>
        <td>XML</td>
        <td>Borland C</td>
        <td rowspan="2">HTML</td></tr>
    <tr>
        <td>PHP</td>
        <td>Basic</td></tr>
</table>
 
 
 
 

 

Örnek 1:

Table Tagı Nasıl Kullanılır?

Örnek 2:

Table Tagı Nasıl Kullanılır?

Örnek 3:

Table Tagı Nasıl Kullanılır?

<!doctype html>
<html>
    <head>
        <title>Tablo Uygulaması</title>  
        <meta charset="utf-8"/>
    </head>
    <body>
        <table border=2  bordercolor="Red" >
            <tr>
                <td align="center" colspan="3" width="100">STOKLAR</td>
            </tr>
            <tr>
                <td width="100">Sıra No</td>
                <td width="100">Stok Adı</td>
                <td width="100">Stok Adeti</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Kalem</td>
                <td align="center" rowspan="3">50</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Kitap</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Silgi</td>
            </tr>
        </table>
    </body>
</html>

 

Örnek 4:

Table Tagı Nasıl Kullanılır?

 

Örnek 5:

Table Tagı Nasıl Kullanılır?

 

<!doctype html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
</head>
   
<body>
<h1>Tablo Örnekleri</h1>
   
<table border="1">

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
   
    <tr>
        <td>5</td>
        <td align="center" rowspan="2" colspan="2" >6</td>
        <td>7</td>
    </tr>
   
    <tr>
        <td>8</td>
        <td>9</td>
    </tr>
   
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
</table>
</body>
</html>

Örnek 6:

Table Tagı Nasıl Kullanılır?

 

<!doctype html>
<html>

    <head>
        <title>Tablo Örnekleri</title>
        <meta charset="utf-8">
        <meta name="description" content="Tablo Örnekleri">
    </head>

    <body>

        <table border="2" width="200">

            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>

            <tr>
                <td>4</td>
                <td colspan="2" align="center">5</td>
            </tr>

            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>

        </table>

    </body>
</html>

 

 

Örnek 7:

Table Tagı Nasıl Kullanılır?

 

<!doctype html>
<html>
    <head>
        <title>Tablo Örnekleri</title>
        <meta charset="utf-8">
        <meta name="description" content="Tablo Örnekleri">
    </head>

    <body>

        <table border="2" width="200">

            <tr>
                <td rowspan="3">1</td>
                <td>2</td>
                <td colspan="2">3</td>
            </tr>

            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>

            <tr>
                <td colspan="3">7</td>
            </tr>

            <tr>
                <td rowspan="2">8</td>
                <td colspan="2" align="center">9</td>
                <td>10</td>
            </tr>

            <tr>
                <td colspan="2">11</td>
                <td>12</td>
            </tr>

        </table>

    </body>
</html>

 

Örnek 8:

Table Tagı Nasıl Kullanılır?

 

<!doctype html>
<html>
    <head>
        <title>Tablo Örnekleri</title>
        <meta charset utf="8">
    </head>

    <body>
        <table border="3" width="50%" height ="200" align="center">
            <tr>
                <td align="center">1</td>  
                <td rowspan="2" align="center">2</td>
                <td rowspan="2" colspan="2" align="center">3</td>
                <td align="center">4</td>      
            </tr>

            <tr>
                <td align="center">5</td>
                <td align="center">6</td>
            </tr>

            <tr>
                <td align="center">7</td>
                <td rowspan="3" align="center">8</td>
                <td align="center">9</td>
                <td rowspan="2"align="center">10</td>
                <td align="center">11</td>
            </tr>

            <tr>
                <td align="center">12</td>
                <td align="center">13</td>
                <td rowspan="2"align="center">14</td>
            </tr>

            <tr>
                <td align="center">15</td>
                <td colspan="2" align="center">16</td>
            </tr>

        </table>
    </body>
</html>

Kaynak

17,767 Okunma Henüz yorum yapılmamış 12/10/2021 17:41:16 12/10/2021 21:29:49

Yorumunuzu Ekleyin
Görsel Liste


Meta Tag nedir?

Meta tag’lar HTML kodunuzun HEAD bölümüne yerleştirilmiş bilgi etiketleridir. Arama motorlarına site ve içeriği hakkında bilgi sunar. Her ne kadar günümüzdeki arama motorlarının çoğu meta tag’lardaki bilgileri dikkate almayıp site içeriğini kendi tekniklerine göre indeksleseler de hala bu tag’lardan bazılarına kısmi destek verebiliyorlar. Arama motorlarının özellikleri için buraya bakabilirsiniz. Sitenizin bu arama motorlarınca doğru bir şekilde gösterimi için bazı Meta tag’ları kullanmakta fayda var. Burada sıklıkla kullanılan meta tag’ları açıklamaya ve onları site kodu içerisine nasıl yerleştirebileceğinizi açıklamaya çalışacağım

28,129 okuma,

Html Nedir? Ve Html Tag'leri

Gelişen browser teknolojileri sayesinde, html içine yazılar dışında resim, ses, video, java, javascript, vbscript gibi dillerle yazılmış programlar, ya da diğer nesneler de gömülebilir. Bu sayede bir html dökümanı düzenlenmiş, mizampajı yapılmış bir metin dosyası olmaktan çıkıp tam anlamıyla bir multimedia ortamı olmaya da hizmet edebilir. Örneğin, browser'a özel olarak yazılan gerekli plug-in'ler (~eklentiler) sistemde varsa, html'le online bir gazete, bir slide-show, şirket-içi yazılımların çalışabildiği bir platform yaratabilirsiniz.

36,529 okuma, 06/03/2015

Genel HTML Tagları

Etiket, HTML dosyas?nda kullan?lan komutlara verilen add?r.HTML içinde kullan?lan tüm etiketler ??ile biter.Ayr?ca etiketin yorum aral??? da ?? kal?b? ile bitirilir.A?a??da etiket kullan?m?na k?sa bir örnek

33,011 okuma, 06/03/2015

Html Tag Listesi

Bazı html tagları hakkında açıklamalı referans listesi

65,442 okuma, 29/05/2014

Table Tagı Nasıl Kullanılır?

Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodlar aşağıdadır.

33,177 okuma, 10/03/2015

HTML5 Form Yapısı ve Form Elemanları

HTML'in bir metin şekillendirme aracı olduğunu söylemiştik.Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar.Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz.Formlar .etiketleri arasına yazılırlar.Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım

55,958 okuma, 31/12/2015

Form Parametreleri (Attributes)

Form elemlarına ek özellikler kazandırmak için kullanılan parametreler.

13,720 okuma, 31/12/2015

BODY Tagı Nasıl Kullanılır?

Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir.

41,234 okuma, 12/05/2014

IMG Tagı Nasıl Kullanılır?

Eger Web sayfalarini gezerken grafik destekleyen bir tarayıcı kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin oldugunu farketmissinizdir.Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar.Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir

66,486 okuma, 07/03/2015

DOCTYPE Tagı

Genel bir bilgi vermek gerekirse; web sayfalarınızın tarayıcı tarafından nasıl yorumlanacağını başka bir değişle nasıl görüntüleneceğini ve bu görüntüleme işlemi sırasında hangi standart ve tanımlamaları (DTD: Document Type Definitions / Doküman türü tanımlamaları) kullanacağını belirten ve (X)HTML dokümanlarının en üst kısmında yer alan ifadelerdir.

33,560 okuma, 17/10/2012

XHTML Nedir?

XHTML kısaltmasının açılımı İngilizce'de eXtensible Hyper Text Markup Language yani dilimizde ki karşılığı ise "Geliştirilebilir Büyütülmüş Metin İşaretleme Dili"dir

43,688 okuma, 27/03/2019

HTML Taglarında Kullanılan Genel Parametreler ve HTML Tag Yapısı

Bu parametreler dışında HTML Taglarında parametre kullanılması istenmemektedir.

21,851 okuma, 20/12/2015

Arama Motorlarına Kayıt

26,196 okuma, 11/03/2014

HTML ile İlk Sayfayı Oluşturmak

İlk HTML sayfamızı nasıl oluşturuyoruz?

54,600 okuma, 06/03/2015

FRAME Tagı

Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeri?ini yerleştirmektir

54,269 okuma, 19/09/2014

A Tagı Nasıl Kullanılır?

HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sınırlı kalmamasıdır.

42,441 okuma, 06/10/2021

UL OL DL Tagları

Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

57,648 okuma, 02/07/2019

P, PRE, B, EM, STRONG, I, SUP, SUB, DEL, CODE Taglar?

34,145 okuma,

IFRAME Tagı

Bir web sayfasının içersine daha çok başka bir sitenin içeriğini aktarmak için kullandığımız bir yol

29,649 okuma,

FORM Tagı

Form tagı parametreleri

28,735 okuma, 16/05/2015

INPUT Tagı Nasıl Kullanılır?

HTML Formlarında en çok kullanılan Taglardan birisidir. Genellikle kullanıcıdan bilgi almak için kullanılırlar.

21,977 okuma, 13/01/2014

xml xhtml html hakkında

Xml Html arasındaki fark

27,801 okuma, 08/10/2021

Meta Tag Nedir?

Meta imlerini ne kadar iyi ve ziyaretçinin umduğuna göre yazarsanız arama motorlarında bulunmanız o kadar kolay olur.Unutmayın ki sitenizi ziyaretçi arayacaktır. Onun gibi düşünmelisiniz

63,352 okuma, 20/09/2023

HTML Editörleri

HTML kodu yazarken hata yapmamak ve kodları daha düzgün görmek için HTML editörleri kullanırız. Aynı zamanda bu editörler kodları yazarken kodun alabileceği değerler hakkındada ön bilgi verir.

27,656 okuma, 08/10/2012

HEAD Tagı Nasıl Kullanılır?

Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketlerinin bulunduğu bölümdür.

37,646 okuma, 20/12/2015

H Tag

H etiketleri, dokümana başlık eklemek için kullanılan etiketlerdir. Etiketindeki ?x? ifadesi, 1?den 6?ya kadar değer almaktadır.

20,584 okuma, 05/10/2021

DOCTYPE Tagı Nasıl Kullanılır?

HTML sayfasının nasıl bir HTML versiyonu ile yazıldığını web tarayıcısına bildirmek DOCTYPE tagının görevidir.

31,003 okuma, 12/05/2014

UL Tagı Nasıl Kullanılır?

Etiketi madde işaretleri şeklinde olan listeler yapmak için kullanılır.

21,709 okuma, 04/10/2023

FONT Tag

etiketi, kullanıldığı yerdeki metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır. Size, color ve face parametreleri ile kullanılabilir.

22,003 okuma, 03/12/2012

P Tag

Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.

24,129 okuma, 05/12/2012

Yükleniyor...
Yükleniyor...