HTML DERSLERİ • Web Tasarım

HTML Tablo Oluşturma Örnekleri

4 sene önce
2 Yorum
52.335 views

Bu yazımızda HTML ile Tablo oluşturma ve HTML ile Tablo Örnekleri konusuna değineceğim. Öncelikle Tablo nasıl oluşturulur ve tablo özellikleri nelerdir ? inceleyelim

Hazırlamış olduğunuz bir web sayfasına tablo eklemek isterseniz;

1
2
3
 
<table> </table>
 

etiketlerinden faydalanmanız gerekecek.
Tablolar satır ve sütunlarda oluşur. Bu satır ve Sütunların kesiştiği bölüme hücre adı verilir.

Diğer HTML Tablo Örnekleri

Youtube kalanındaki HTML Tablo oluşturma videosu için tıklayın.

“tr” etiketi kullanarak tabloya satır ekleme işlemi gerçekleştirilir. “td” etiketi ile de sütun oluşturma işlemi gerçekleşir. border parametresi ise tablomuzun çerçevesinin kalınlığını belirlemek için kullanılmaktadır. Eğer tablo kenarlığı istenmiyorsa border=0 olarak ayarlanmalıdır. Aşağıdaki örneği inceleyelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<table border=1>
<tr>
<td>Kalem</td>
</tr>
<tr>
<td>Kitap</td>
</tr>
<tr>
<td>Defter</td>
</tr>
</table>
 

Kodlarımızı oluşturduğumuzda table etiketi içinde tr etiketleri ile 3 satır oluşturulduğunu ve her bir satırda bir adet td etiketi kullanıldığını görüyoruz. Böyle bir durumda 3 satır ve 1 sütundan oluşan aşağıdaki tabloyu elde ediyoruz.

table_1

Şimdi de 2 sütun ve 2 satırdan oluşan bir tablo oluşturalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>  
    <meta charset="utf-8"/>
</head>
    <body>
<table border=2>
<tr>
<td>1. Sütun</td>
<td>2. Sütun </td>
</tr>
<tr>
<td>Ahmet</td>
<td>Cansever</td>
</tr>
<tr>
<td>Mehmet</td>
<td>Salim</td>
</tr>
</table>
    </body>
</html>
 

kodlarımızı çalıştırdığımızda;

table_2

 

İlginizi çekebilir: HTML Kodları

 

şeklinde 2 satır ve 2 sütundan oluşan bir tablo oluşturmuş oluyoruz.

BorderColor parametresi tablomuzda kalınlığı belirlenen kenarlığın rengini ayarlamak için kullanılır. Örneğimizi inceleyelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>  
    <meta charset="utf-8"/>
</head>
    <body>
<table border=2 bordercolor="Red" >
<tr>
<td>1. Sütun</td>
<td>2. Sütun </td>
</tr>
<tr>
<td>Ahmet</td>
<td>Cansever</td>
</tr>
<tr>
<td>Mehmet</td>
<td>Salim</td>
</tr>
</table>
    </body>
</html>
 

Yukarıdaki HTML kodlarını tarayıcıda çalıştırdığımızda aşağıdaki görüntüyü elde ederiz.

table_3

Şimdi de aynı örnek üzerinde bgcolor parametresi ile hücre arkaplan renklerini değiştirelim. bgcolor=”pink” ifadesi ile hücre renklerini değiştirip sonuca bakalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>  
    <meta charset="utf-8"/>
</head>
    <body>
<table border=2 bgcolor="pink" bordercolor="Red" >
<tr>
<td>1. Sütun</td>
<td>2. Sütun </td>
</tr>
<tr>
<td>Ahmet</td>
<td>Cansever</td>
</tr>
<tr>
<td>Mehmet</td>
<td>Salim</td>
</tr>
</table>
    </body>
</html>
 

table_4

Şimdide tablomuzda arkaplana background parametresini kullanarak bir resim ekleyelim. Örneğimizde html sayfamızla aynı yerde php.png isimli bir resim olduğunu belirterek kodlarımızı yazalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>  
    <meta charset="utf-8"/>
</head>
    <body>
<table border=2 background="php.png" bordercolor="Red" >
<tr>
<td>1. Sütun</td>
<td>2. Sütun </td>
</tr>
<tr>
<td>Ahmet</td>
<td>Cansever</td>
</tr>
<tr>
<td>Mehmet</td>
<td>Salim</td>
</tr>
</table>
    </body>
</html>
 

table_5

Şimdide Width ve Height parametrelerine bakalım. Width parametresi Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır.

1
2
3
 
<table width="200">
 

şeklinde Tablo genişliğini belirlemek için kullanılır.

1
2
3
 
<td width=”200”>
 

şeklinde kullanımda ise hücre genişliği ayarlanabilir.

Örneğimizi inceleyelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>  
    <meta charset="utf-8"/>
</head>
    <body>
<table border=2 width="200" bordercolor="Red" >
<tr>
<td>1. Sütun</td>
<td>2. Sütun </td>
</tr>
<tr>
<td>Ahmet</td>
<td>Cansever</td>
</tr>
<tr>
<td>Mehmet</td>
<td>Salim</td>
</tr>
</table>
    </body>
</html>
 

table_6

Şimdiki örneğimizde 1. sütun genişliğini 200 piksel, 2. sütunun genişliğini 300piksel olarak ayarlayalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>  
    <meta charset="utf-8"/>
</head>
    <body>
<table border=2  bordercolor="Red" >
<tr>
<td width="200">1. Sütun</td>
<td width="300">2. Sütun </td>
</tr>
<tr>
<td>Ahmet</td>
<td>Cansever</td>
</tr>
<tr>
<td>Mehmet</td>
<td>Salim</td>
</tr>
</table>
    </body>
</html>
 

table_7

Şimdide tablomuzda hücre birleştirme işlemlerinin nasıl yapılacağına bakalım. Eğer aynı satırdaki hücreleri birleştireceksek Colspan, aynı sütundaki hücreleri birleştirmek istiyorsak Rowspan kullanılır.

Bir örnekle inceleyelim. Örneğimizde bir sınıfa ait kız ve erkek öğrenci sayılarının gösterildiği bir tablo bulunmakta. Tablomuzun ilk satırındaki iki hücreyi colspan ile birleştirelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>  
    <meta charset="utf-8"/>
</head>
    <body>
<table border=2  bordercolor="Red" >
<tr>
<td colspan="2" width="100">5B Sınıfı</td>
</tr>
<tr>
<td>Kız</td>
<td>Erkek</td>
</tr>
<tr>
<td>12</td>
<td>18</td>
</tr>
</table>
    </body>
</html>
 

table_8

rowspan ve colspan aynı anda kullanımına bakalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>  
    <meta charset="utf-8"/>
</head>
    <body>
<table border=2  bordercolor="Red" >
<tr>
<td 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 rowspan="3">50</td>
</tr>
<tr>
<td>2</td>
<td>Kitap</td>
</tr>
<tr>
<td>3</td>
<td>Silgi</td>
</tr>
</table>
    </body>
</html>
 

table_9

Yukarıdaki örnekte 1. satırdaki hücre içinde bulunan STOKLAR içeriğini ortalamak için align parametresini kullanabiliriz. Ufak bir değişiklik yapalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!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>
 

table_10

Cellspacing ifadesi Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.

table_11

Cellpadding ise Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.

table_12

Örnek 3:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Alış Veriş Tablosu</title>
    </head>
    
    <body>
        <table border="2">
            <tr>
                <td colspan="4">Alış Veriş Tablosu</td>
            </tr>
            
            <tr>
                <td>Tür</td>
                <td>Ürün</td>
                <td>Fiyat</td>
                <td>İndirim Oranı</td>
            </tr>
            
            <tr>
                <td rowspan="5">Beyaz Eşya</td>
                <td>Buzdolabı</td>
                <td>1.750</td>
                <td rowspan="3">%25</td>
            </tr>
            
             <tr>
                <td>Fırın</td>
                <td>650</td>
            </tr>
            
            <tr>
                <td>Çamaşır Makinesi</td>
                <td>1.100</td>
            </tr>
            
            <tr>
                <td>Bulaşık Makinesi</td>
                <td>750</td>
                <td rowspan="2">%35</td>
            </tr>
            
            <tr>
                <td>Dondurucu</td>
                <td>600</td>
                
            </tr>
            
            <tr>
                <td rowspan="2">Küçük Ev Aletleri</td>
                <td>Mikser</td>
                <td>138</td>
                <td rowspan="2">%10</td>            
            </tr>
            
            <tr>
                <td>Saç Kurutma</td>
                <td>151</td>
            </tr>
        </table>
    </body>
</html>
 
 

Örnek 4:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!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>
 
Ekran Çıktısı:

Örnek 5:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!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>
 
Ekran Çıktısı:

Örnek 6:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!doctype html>
<html>
 
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
<meta name="description" content="www.yazilimkodlama.com">
</head>
 
<body>
<table border="2" width="200">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td colspan="2" align="center">6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td colspan="3" align="center">13</td>
</tr>
</table>
</body>
</html>
 

Ekran Çıktısı:

 

Örnek 7:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!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 rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
 
Ekran Çıktısı:

Örnek 8 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<!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>
 
Ekran Çıktısı:

 

Örnek 9:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!doctype html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
<meta name="description" content="Tablo Örnekleri">
</head>
<body>
<h3 align="center">Başlık</h3>
<table border="2" bordercolor="Red" bgcolor="Pink" align="center">
<tr>
<td colspan="2">65</td>
<td colspan="2">40</td>
<td colspan="2">20</td>
</tr>
<tr>
<td>Erkek</td>
<td>Kadın</td>
<td>Erkek</td>
<td>Kadın</td>
<td>Erkek</td>
<td>Kadın</td>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
</body>
</html>
 

Ekran Çıktısı:

 

Örnek 10:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!doctype html>
<html>
<head>
   <title>Tablo Örnekleri</title>
   <meta charset utf="8">
</head>
    
<body>
   <table border="3" width="50%" height ="200" bordercolor="white" bgcolor="red" 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>
 
Ekran Çıktısı:

Şunlar da Hoşunuza Gidebilir

2 Yorum

Yorum yap