Civa.Cloud

Tablo Hücre Birleştirme ve Listeler (Sıralı ve Sırasız)

601 Views

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>&nbsp;</td>
				<td colspan="3" class="mb">Imported</td>
				<td colspan="3" class="mb">Domestic</td>
			</tr>
			<tr>
				<td class="artir">&nbsp;</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>&nbsp;</td>
				<td>&nbsp;</td>
				<td class="mb">A Grade</td>
				<td class="mb">B Grade</td>
				<td>&nbsp;</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 thought on “Tablo Hücre Birleştirme ve Listeler (Sıralı ve Sırasız)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.