Tables

Kategori: HTML , 26 Ekim 2019 , JanFranco


HTML'de tablolar oluşturmak için table etiketini kullanırız. Tablolar satır satır oluşturulur. Bir satıra her eleman eklediğimizde yeni bir sütun eklenmiş olur. Satırları tanımlamak için table row anlamına gelen tr etiketini, verileri tanımlamak için table data anlamına gelen td etiketini kullanırız. Bu bilgiler ile basit bir tablo oluşturalım:


<table>
	<tr>
		<td>15</td>
		<td>15</td>
		<td>30</td>
		
	</tr>
	<tr>
		<td>45</td>
		<td>60</td>
		<td>45</td>
	</tr>
	<tr>
		<td>60</td>
		<td>90</td>
		<td>90</td>
	</tr>
</table>
html-tables

Tablolara başlıklar eklemek için table heading anlamına gelen th etiketlerini kullanırız. Başlığın satır bazlı mı sütun bazlı mı olduğunu belirtmek için scope attribute'ını kullanırız. Bir örnek yapalım:


<table>
	<tr>
		<th></th>
		<th scope="col">Saturday</th>
		<th scope="col">Sunday</th>
	</tr>
	<tr>
		<th scope="row">Tickets sold:</th>
		<td>120</td>
		<td>135</td>
	</tr>
	<tr>
		<th scope="row">Total sales:</th>
		<td>$600</td>
		<td>$675</td>
	</tr>
</table>
html-tables

Bir veri bir sütunu veya bir satırı değil, birden fazla satırı veya sütunu kapsayabilir. Bunu tabloda yapabilmek için td etiketinde colspan veya rowpan attribute'larını kullanabiliriz. colspan, column span yani sütun bazlı genişleme, rowspan ise satır bazlı genişlemedir:


<table>
	<tr>
		<th></th>
		<th>9am</th>
		<th>10am</th>
		<th>11am</th>
		<th>12am</th>
	</tr>
	<tr>
		<th>Monday</th>
		<td colspan="2">Geography</td>
		<td>Math</td>
		<td>Art</td>
	</tr>
	<tr>
		<th>Tuesday</th>
		<td colspan="3">Gym</td>
		<td>Home Ec</td>
	</tr>
</table>
html-tables


<table>
	<tr>
		<th></th>
		<th>ABC</th>
		<th>BBC</th>
		<th>CNN</th>
	</tr>
	<tr>
		<th>6pm - 7pm</th>
		<td rowspan="2">Movie</td>
		<td>Comedy</td>
		<td>News</td>
	</tr>
	<tr>
		<th>7pm - 8pm</th>
		<td>Sport</td>
		<td>Current Affairs</td>
	</tr>
</table>
html-tables

Son olarak uzun tabloları head, body ve footer olarak 3 kısma bölebiliriz. head kısmı için thead, body kısmı için tbody ve footer kısmı için tfoot etiketlerini kullanırız. Bir örnek yapalım:


<table>
	<thead>
		<tr>
			<th>Date</th>
			<th>Income</th>
			<th>Expenditure</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1st January</th>
			<td>250</td>
			<td>36</td>
		</tr>
		<tr>
			<th>2nd January</th>
			<td>285</td>
			<td>48</td>
		</tr>
		<tr>
			<th>...</th>
			<td>...</td>
			<td>...</td>
		</tr>
		<tr>
			<th>31st January</th>
			<td>129</td>
			<td>64</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>7824</td>
			<td>1241</td>
		</tr>
	</tfoot>
</table>
html-tables


Sonraki Yazı: Forms
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın