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>
2.338 Gösterim
[…] Hafta: Tablo Hücre Birleştirme ve Listeler (Sıralı ve Sırasız) […]