Html, tablo oluşturma, biçimlendirme
17447 0

Html Tablolar

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 <font> etiketi html5 ile birlikte kullanımdan kaldırılmıştır.

Html'de tablo oluşturmak için en dışa <table> elementi, onun içerisinde <tr> elementi yani satırlar, onun içerisine de <tr> yani 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.

<!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>

Tablolara başlık satırı ekelemek için <td> elementleri yerine <th> elementi 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.

<table border="1">

Yukarıdaki kodların görünümü şöyle olacaktır;

Tablo Görünümü

Table Elementi Özellikleri

Özellik Açıklama Aldığı Değerler
border Kenarlık ekleme Sayısal değerler
align Tablo yatayda hizalama left, right, center
width Genişlik Sayısal değerler
cellpadding İç boşluk, değer ile hücre 
kenarlıkları arasındaki mesafe
Sayısal değerler
cellspacing Hücreler arasındaki mesafeler Sayısal değerler
bgcolor Tablonun zemin rengi #000000, rgb(0,0,0), black

Eğer tabloya, tablonun dışında bir başlık eklemek isterseniz <caption> elementini kullanabilirsiniz.

<table border="1">
    	<caption>Bu bir deneme tablosudur</caption>

Caption elementine ait tek bir özellik vardır o da "align", başlığın nerede durmasını istiyorsanız ona göre bir değer vermelisiniz. (left, right, top, bottom)

Tablo ve başlık

<thead>, <tbody>, <tfoot> etiketleri anlaşılacağı üzere bir tablonun başlık, vücut ve alt başlık kısımlarının tanımlanması için kullanılır. Örneğin;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
	<title>Tablo Uygulaması</title>
</head>
<body>
	<table border="1" cellpadding="5" cellspacing="5">
		<caption align="bottom">Bu bir deneme tablosudur</caption>
		<thead>
			<tr>
				<th>Başlık1</th>
				<th>Başlık2</th>
				<th>Başlık3</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>Alt Satır1 - Sütun1</td>
				<td>Alt Satır1 - Sütun2</td>
				<td>Alt Satır1 - Sütun3</td>
			</tr>
		</tfoot>
		<tbody>
			<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>
		</tbody>
	</table>
</body>
</html>

Kodların verdiği çıktı şöyle olacaktır;

Tablo Örnek 3

Yukarıdaki örnekte <tfoot> başta yazılmasına rağmen çıktıda sonda göründüğüne dikkat edin.

Bu bilgilerden sonra sıra geldi tablo işinde en kafa karıştırıcı kısım olan hücre birleştirmelere, aslında çok ta karmaşık değil. Tabii ki mantığını anladıktan sonra. Şöyle açıklamaya çalışalım; sütunları birleştiriyorsak en fazla sütun sayısını düşünerek bu işlemi yapmalıyız. Örneğin en fazla 5 sütunu olan şu tabloyu elde etmek için sütun birleştirme işlemi yapalım.

Sütun Birleştirme

Sütun birleştirmek için "colspan" özelliği kullanılır ve kaç hücre birleştirilmek isteniyorsa o değer verilir. Aşağıda birinci satırda iki adet birleştirilmiş sütun bulunmaktadır ve bunlar ikişer sütunu temsil ettiğinden 4 sütun ve 1 sütun da tek başına bulunduğundan toplam 5 sütun olur. Zaten tablonun azami sütun sayısı da 5'tir.

<table border="1" cellpadding="5" cellspacing="5">
	<tr>
		<td colspan="2">2 Hücre Birleştir</td>
		<td>1 Hücre</td>
		<td colspan="2">2 Hücre Birleştir</td>
	</tr>
	<tr>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
	</tr>
</table>

Şimdi de satır birleştirme işlemine bir göz atalım. Bu işlemde de dikkat etmemiz gereken şu; satır birleştirme işlemi yaptığımızda alt satırlardaki bir hücreyi üstteki hücreye dahil ettiğimizden alttaki sütun sayıları bir azalacaktır. Şu tabloya bakalım;

Satır Birleştirme

Satır birleştirme işlemi için "rowspan" kullanılır. Kaç satır birleştirlmek isteniyorsa o değer belirtilir.

<table border="1" cellpadding="5" cellspacing="5">
	<tr>
		<td rowspan="2">Satır Birleştir</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
	</tr>
	<tr>
		<!--Burada 1 hücre eksik-->
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
	</tr>
	<tr>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
		<td>1 Hücre</td>
	</tr>
</table>

 

^
X