1. Anasayfa
  2. Html
  3. Alakalı Konular

Html Tablo Uygulamaları

admin tarafından
8 Ekim 2014 3711 kez okundu Okuma süresi: 12dk, 30sn
Html Tablo Uygulamaları
2

Html tablo uygulamlarına geçmeden önce tablo oluştururken kullanacağımız komutlar ve dikkat edilmesi gerekenleri bir hatırlayıp uygulamalara geçelim,
Temel olarak tablo oluşturmada kullanacağımız 3 adet etiket var bunlar table,tr ve td; bu komutları kullanırken dikkat etmemiz gereken noktalar

  • Her tablo için bir table etiketi açılır ve tablo bittiğinde bu etiket kapatılır.
  • Tabloda yer alan her bir satır için tr etiketleri açılır.
  • O satırda bulunan sütun sayısı kadar td etiketi açılır. (tr içerisinde)
  • Her satırdaki td sayıları aynı olmalıdır.
  • Tablonun içinde yer alan veriler sadece td etiketleri arasına yazılmalıdır.

Rowspan-Colspan

Bazı durumlarda oluşturulan tabloların içindeki hücrelerin birleştirilmesi gerekebilir. Aynı satırdaki hücreler için colspan, aynı sütundaki hücreleri birleştirmek için rowspan komutları kullanılır.

Konuyu daha iyi anlayabilmek için aşağıdaki uygulamaları inceleyebilirsiniz…
Html Tablo Uygulaması 1
tablo1

<html>
<head>
<title>Bilisimogretmeni.com Tablo Uygulamarı</title>
</head>
<body>
<TABLE CELLSPACING="0" CELLPADDING="4" BORDER="1">
  <TR>
    <td COLSPAN="3" NOWRAP="NOWRAP" BGCOLOR="#FFFF99">Alış Veriş Tablosu</td>
  </TR>
  <TR>
    <TD BGCOLOR="#FFCCFF">Tür</TD>
    <TD BGCOLOR="#FFCCFF">Ürün</TD>
    <TD BGCOLOR="#FFCCFF">Fiyat</TD>
  </TR>
  <TR>
    <TD ROWSPAN="5" BGCOLOR="#CCFFFF">Beyaz Eşya</TD>
    <TD>Buzdolabı</TD>
    <TD>500.00 TL</TD>
  </TR>
  <TR><!-- www.bilisimogretmeni.com -->
    <TD>Ç.Makinesi</TD>
    <TD>450.00 TL</TD>
  </TR>
  <TR>
    <TD>Fırın</TD>
    <TD>300.00 TL</TD>
  </TR>
  <TR>
    <TD>B.Makinesi</TD>
    <TD>300.00 TL</TD>
  </TR>
  <TR>
    <TD>D.Dondurucu</TD>
    <TD>250.00 TL</TD>
  </TR>
  <TR>
    <TD ROWSPAN="2" BGCOLOR="#CCFFFF">Küçük Ev Aletleri</TD>
    <TD>Meyve Sıkacağı</TD>
    <TD>150.00 TL</TD>
  </TR>
  <TR><!-- www.bilisimogretmeni.com -->
    <TD>M.Robotu</TD>
    <TD>175.00 TL</TD>
  </TR>
  <TR>
    <TD COLSPAN="2" ALIGN="right">Toplam</TD>
    <TD BGCOLOR="#FFFF00">2.125.00 TL</TD>
  </TR>
</TABLE>
</body>
</html>

Html Tablo Uygulaması 2
tablo2

<html>
<head>
<title>Bilisimogretmeni.com Tablo Uygulamarı</title>
</head>
<body>
<table width="600" border="2" bordercolor="#ff9900" cellpadding="5">
<tr>
<td colspan="3" align="center" bgcolor="#ffcc99">
<font face="Arial" color="#990000"><b>Bilişim Dersler</b></font>
</td>
</tr>
<tr><!-- www.bilisimogretmeni.com -->
<td rowspan="2" bgcolor="#ccff00">Programlama Temelleri</td>
<td bgcolor="#ffcc66">Paket Programlar</td>
<td bgcolor="#ff9999">Temel Elektronik</td>
</tr>
<tr>
<td bgcolor="#ff6699">Teknik Resim</td>
<td bgcolor="#0099ff">Bilişim Teknolojileri</td>
</tr>
<tr>
<td colspan="2" bgcolor="#99ccff">Web Tasarım ve Animasyon</td>
<td bgcolor="#ffccff">Grafik Animasyon</td>
</tr>
</table>
</body>
</html>

Html Tablo Uygulaması 3
tablo3

<html>
<head>
<title>Bilisimogretmeni.com Tablo Uygulamarı</title>
</head>
<body>
<table border="1" width="400" height="300">
<tr align="center" BGCOLOR="#FFCCFF">
<td rowspan="3" >Gün</td>
<td colspan="3">Seminer</td>
</tr>
<tr align="center" BGCOLOR="#AABBFF">
<td colspan="2">Zaman Çizelgesi</td>
<td rowspan="2">Başlık</td>
</tr><!-- www.bilisimogretmeni.com -->
<tr align="center" BGCOLOR="#1133FF">
<td>Başlama</td>
<td>Bitiş</td>
</tr>
<tr align="center" BGCOLOR="#CCFFFF">
<td rowspan="2">Pazartesi</td>
<td rowspan="2">08:00</td>
<td rowspan="2">14:00</td>
<td>Html Temel Komutları</td>
</tr>
<tr align="center"BGCOLOR="#CCFFFF">
<td>
Html Örnek Uygulamalar
</td>
</tr>
<tr align="center" BGCOLOR="#FFFF99">
<td rowspan="3">
Salı
</td><!-- www.bilisimogretmeni.com -->
<td>08:00</td>
<td>10:00</td>
<td>Html Listeleme Etiketleri</td>
</tr>
<tr align="center" BGCOLOR="#FFFF99">
<td>10:00</td>
<td>12:00</td>
<td rowspan="2">Listeleme Uygulamaları</td>
</tr>
<tr align="center" BGCOLOR="#FFFF99">
<td>10:00</td>
<td>12:00</td>
</tr>
<tr align="center" BGCOLOR="#CCFFFF">
<td >Çarşamba</td>
<td >08:00</td>
<td >14:00</td>
<td>Genel Tekrar, Soru-Cevap</td>
</tr>
</table><!-- www.bilisimogretmeni.com -->
</body>
</html>

Html Tablo Uygulaması 4
tablo4

<html>
<head>
<title>Bilisimogretmeni.com Tablo Uygulamarı</title>
</head>
<body>
<table border="1" width="200" height="150">
<tr>
<td rowspan="3">b</td>
<td>i</td>
<td>l</td>
<td>i</td>
<td>s</td>
</tr>
<tr><!-- www.bilisimogretmeni.com -->
<td>i</td>
<td colspan="3">m</td>
</tr>
<tr>
<td>o</td>
<td>g</td>
<td>r</td>
<td>e</td>
</tr>
<tr>
<td>t</td>
<td>m</td>
<td>e</td>
<td>n</td>
<td>i</td>
</tr><!-- www.bilisimogretmeni.com -->
</table>
</body>
</html>

Html Tablo Uygulaması 5
tablo5

<html>
<head>
<title>Bilisimogretmeni.com Tablo Uygulamarı</title>
</head>
<body>
<table border="1" width="250">
<tr align="center">
<td colspan="7">
<b>Periyodik Element Tablosu</b>
</td>
</tr><!-- www.bilisimogretmeni.com -->
<tr align="center">
<td><b>I</b></td>
<td><b>II</b></td>
<td><b>III</b></td>
<td><b>IV</b></td>
<td><b>V</b></td>
<td><b>VI</b></td>
<td><b>VII</b></td>
</tr>
<tr align="center">
<td BGCOLOR="#FFCCFF">H</td>
<td></td>
<td colspan="3" rowspan="3">Periyodik Element Tablosu</td>
<td></td>
<td BGCOLOR="#FFFF99">He</td>
</tr>
<tr>
<td>Li</td>
<td>Be</td>
<td>B</td>
<td BGCOLOR="#FFFF99">Ne</td>
</tr>
<tr><!-- www.bilisimogretmeni.com -->
<td>Na</td>
<td>Mg</td>
<td>Al</td>
<td BGCOLOR="#FFFF99">Ar</td>
</tr>
<tr align="center">
<td>K</td>
<td>Ca</td>
<td>Sc</td>
<td>Ti</td>
<td>V</td>
<td>Ga</td>
<td BGCOLOR="#FFFF99">Kr</td>
</tr></table>
</body>
</html>

Html Tablo Uygulaması 6
tablo6

<html>
<head>
<title>Bilisimogretmeni.com Tablo Uygulamarı</title>
</head>
<body>
<table border="1" width="600" 
   style="background-color: #eeeeee">
   <caption>Sipariş Formu</caption>
   <tr>
    <th align="left">Açıklama</th>
    <th align="right">Adet</th>
    <th align="right">Fiyat</th>
    <th align="left">Email hesabı notu</th>
   </tr>
   <tr><!-- www.bilisimogretmeni.com -->
    <td>Email Hesapları</td>
    <td align="right">10</td>
    <td align="right">9.90</td>
    <td align="left" rowspan="5">
     <table border="1">
      <tr class="small"><td>Mailbox</td><td>10GB</td></tr>
      <tr class="small"><td>Webmail</td><td>Evet</td></tr>
      <tr class="small"><td>POP3</td><td>Evet</td></tr>
      <tr class="small"><td>IMAP</td><td>Evet</td></tr>
      <tr class="small"><td>Anti-Spam</td><td>Evet</td></tr>
     </table>
    </td>
   </tr>
   <tr>
    <td>bilisimogretmeni.com Alan Ekleme</td>
    <td align="right">1</td>
    <td align="right">99.00 TL</td>
   </tr>
   <tr><!-- www.bilisimogretmeni.com -->
    <td>1 Yıllık Barındırma</td>
    <td align="right">1</td>
    <td align="right">199.00 TL</td>
   </tr>
   <tr>
    <td colspan="2" align="right">Güvenlik</td>
    <td align="right">29.99 TL</td>
   </tr>
   <tr>
    <td colspan="2" align="right">Yedekleme</td>
    <td align="right">9.99 TL</td>
   </tr>
  </table>
  </body>
</html>

Html Tablo Uygulaması 7
tablo7

<HTML>
<head>
<title>Bilisimogretmeni.com Tablo Uygulamarı</title>
</head>
 <BODY>
  <Font Face = "Verdana">
  <TABLE Border = "1" >
   <TR>
    <td Colspan = "6" Align = "center">Ders Programı</td>
   </TR>
   <TR><!-- www.bilisimogretmeni.com -->
    <td Rowspan = "6">Dersler</td>
    <td>Pazartesi</td>
    <td>Salı</td>
    <td>Çarşamba</td>
    <td>Perşembe</td>
    <td>Cuma</td>
   </TR>
   <TR>
    <TD>Kimya</TD
    ><TD>Matematik</TD>
    <TD>Kimya</TD>
    <TD>Matematik</TD>
    <TD>Resim</TD>
   </TR>
   <TR><!-- www.bilisimogretmeni.com -->
    <TD>Türkçe</TD>
    <TD>Tarih</TD>
    <TD>İngilizce</TD>
    <TD>Türkçe</TD>
    <TD>Beden Eğitimi</TD>
   </TR>
   <TR>
    <td Colspan = "5" Align = "center">Dinlenme</td>
   </TR>
   <TR>
    <TD>Kimya</TD>
    <TD>Matematik</TD>
    <TD>Kimya</TD>
    <TD>Matematik</TD>
    <TD Rowspan = "2">Proje</TD>
   </TR>
   <TR><!-- www.bilisimogretmeni.com -->
    <TD>Türkçe</TD>
    <TD>Tarih</TD>
    <TD>İngilizce</TD>
    <TD>Türkçe</TD>
   </TR>
  </TABLE>
  </Font>
 </BODY>
</HTML>
Bu İçeriğe Tepkin Ne Oldu?
  • 10
    ba_ar_l_
    Başarılı
  • 8
    gayet_yi
    Gayet İyi
  • 0
    te_ekk_rler
    Teşekkürler
  • 1
    anlamad_m
    Anlamadım
  • 4
    yetersiz
    Yetersiz
Etiketler
İlginizi Çekebilir
aspnetmasterpage
12 Mayıs 2014
Asp.Net MasterPage Uygulaması

Benzer Yazılar

Subscribe
Bildir
guest

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

2 Yorum
Inline Feedbacks
View all comments
Uğur Keskin

Gayet güzel bir paylaşım, html ye yeni başlayanlar için ideal :)

5
Yanıtla
BilisimOgretmeni

teşekkür ederiz iyi çalışmalar.

4
Yanıtla