Css3 ile Basit Animasyonlar:

Katmanlar ve CSS ile tasarım yapılmadığı zamanlarda web sayfalarında en can alıcı özelliklerden biri kesinlikle tablolardı. Şu an da mevcut sistemde hala çok sık kullanıldığını görebilirsiniz. Toplu listeleme işlemlerinde çokça kullanılmaktadır. Video biraz eski tabi ama tablo mantığını anlatmak için yeterli. Videoda bahsedilen etiketi html5 ile birlikte kullanımdan kaldırılmıştır.

Html’de tablo oluşturmak için en dışa

elementi, onun içerisindeelementi yani satırlar, onun içerisine deyani sütunlar (hücreler) yerleştirilir. Yazım şekli bu hiyerarşik yapıda olmalıdır. Basit bir tablo oluşturalım. 2 satır ve 3 sütundan oluşsun.

Örnek

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
	<title>Tablo Uygulaması</title>
</head>
<body>
	<table>
		<tr>
			<td>Satır1 - Sütun1</td>
			<td>Satır1 - Sütun2</td>
			<td>Satır1 - Sütun3</td>
		</tr>
		<tr>
			<td>Satır2 - Sütun1</td>
			<td>Satır2 - Sütun2</td>
			<td>Satır2 - Sütun3</td>
		</tr>
	</table>
</body>
</html>

ablolara başlık satırı ekelemek içinelementleri yerineelementi kullanılır.
Bu elementi kullandığınızda hücrelerdeki değerler kalın ve ortalı yazdırılacaktır.

<table>
	<tr>
		<th>Başlık1</th>
		<th>Başlık2</th>
		<th>Başlık3</th>
	</tr>
	<tr>
		<td>Satır1 - Sütun1</td>
		<td>Satır1 - Sütun2</td>
		<td>Satır1 - Sütun3</td>
	</tr>
	<tr>
		<td>Satır2 - Sütun1</td>
		<td>Satır2 - Sütun2</td>
		<td>Satır2 - Sütun3</td>
	</tr>
</table>

Yukarıdaki kodları yazıp denerseniz tablonun kenarlığının olmadığını göreceksiniz. Tabloya kenarlık eklemek için “border” özelliğini kullanmalısınız. Border değeri büyüdükçe kenarlık kalınlığı artacaktır.

 

İlgili HaberlerYazarın Diğer İçerikleri