Tablo Hücre Birleştirme ve Listeler (Sıralı ve Sırasız)
- Excel’de Oluşturulmuş Tablonun Çözümü (Hücre Birleştirme – colspan, rowspan)
- Resimde Verilen Tablonun Çözümü
- Sırasız Liste
- Sırasız İç İçe Liste
- Sıralı Liste
- Resmi Verilen Listenin Yapımı
- Listeden Menü Yapımı
1.Öğretim Dersinde Yapılan Örnekler
2.Öğretim Dersinde Yapılan Örnekler
Excel’de Oluşturulmuş Tablonun Çözümü (Hücre Birleştirme – colspan, rowspan)
<!doctype html> <html> <head> <title>Örnek Tablo 2 Çözümü</title> <style> .ortali{ text-align:center; } .alta_hizala{ vertical-align:bottom; } </style> </head> <body> <table border="2"> <tr> <td colspan="4" class="ortali">Başlık</td> </tr> <tr> <td colspan="2" rowspan="2" class="alta_hizala"> dfjkgsdf </td> <td>C</td> <td rowspan="2">İPTAL</td> </tr> <tr> <td>11</td> </tr> <tr> <td colspan="2">Ortalama</td> <td colspan="2" class="ortali">15</td> </tr> </table> </body> </html>
Resimde Verilen Tablonun Çözümü
<!doctype html> <html> <head> <title>Örnek Resim1.png deki Tablo Çözümü</title> <style> .mb{ background-color:darkblue; color:white; } .artir{ width:100px; } </style> </head> <body> <table border="2"> <tr> <td> </td> <td colspan="3" class="mb">Imported</td> <td colspan="3" class="mb">Domestic</td> </tr> <tr> <td class="artir"> </td> <td class="mb">Apricots</td> <td colspan="2" class="mb">Cherries</td> <td class="mb">Apricots</td> <td colspan="2" class="mb">Cherries</td> </tr> <tr> <td> </td> <td> </td> <td class="mb">A Grade</td> <td class="mb">B Grade</td> <td> </td> <td class="mb">A Grade</td> <td class="mb">B Grade</td> </tr> <tr> <td colspan="7">Perth</td> </tr> </table> </body> </html>
Sırasız Liste
<!doctype html> <html> <head> <title>Örnek - Sırasız Liste</title> <style> </style> </head> <body> <ul> <li>Kahve</li> <li>Süt</li> <li>Salep</li> <li> <table border="2"> <tr><td> <ul style="list-style-type:square"> <li>asd</li> <li>wer</li> </ul> </td><td>rte</td></tr> </table> </li> <li>Boza</li> </ul> </body> </html>
Sırasız İç İçe Liste
<!doctype html> <html> <head> <title>Örnek - Sırasız Liste</title> <style> </style> </head> <body> <ul> <li>Kahve</li> <li>Süt</li> <ul> <li>İnek Sütü</li> <ul> <li>Yerli İnek Sütü</li> <li>Bildiğin İnek Sütü</li> </ul> <li>Keçi Sütü</li> <li>Toz Süt</li> </ul> <li>Boza</li> </ul> </body> </html>
Sıralı Liste
<!doctype html> <html> <head> <title>Örnek - Sırasız Liste</title> <style> </style> </head> <body> <ol> <li>Kahve</li> <li>Süt</li> <ol type="A"> <li>İnek Sütü</li> <ol type="i"> <li>Yerli İnek Sütü</li> <li>Bildiğin İnek Sütü</li> </ol> <li>Keçi Sütü</li> <li>Toz Süt</li> </ol> <li>Boza</li> </ol> </body> </html>
Resmi Verilen Listenin Yapımı
<!doctype html> <html> <head> <title></title> <style> </style> </head> <body> <ol type="A"> <li>html</li> <ul style="list-style-type:circle"> <li>html taglari</li> <li>xhtml</li> </ul> <li>asp</li> <ol type="I"> <li>asp.net</li> <li>db</li> </ol> <li>php</li> <ul style="list-style-type:square"> <li>php code</li> <li>mysql</li> </ul> </ol> </body> </html>
Listeden Menü Yapımı
<!doctype html> <html> <head> <title>Örnek - Sırasız Liste</title> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#555; } li{ float:left; } li a{ display:block; color:white; text-align:center; padding:16px; text-decoration:none; } li a:hover{ background-color:#111111; } </style> </head> <body> <ul> <li><a href="#anasayfa">Ana Sayfa</a></li> <li><a href="#bizkimiz">Biz Kimiz</a></li> <li><a href="#iletisim">İletişim</a></li> <li><a href="#ulasim">Ulasim</a></li> </ul> </body> </html>
1.926 Gösterim
[…] Hafta: Tablo Hücre Birleştirme ve Listeler (Sıralı ve Sırasız) […]