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

Yorumunuzu Ekleyin

Arama Motorlarına Kayıt
FORM Tagı
xml xhtml html hakkında
Yükleniyor...