<table border="1">
<tr>
<td> hücre </td>
</tr>
</table>
<table border="1">
<tr>
<td> hücre1 </td>
<td> hücre2 </td>
</tr>
</table>
<table border="1">
<tr>
<td> hücre1 </td>
</tr>
<tr>
<td> hücre2 </td>
</tr>
</table>
<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>
Tabloya genel bir başlık atayabiliriz (thead). Her sütun
için de kendi başlığını oluşturmak mümkündür. Tablonun sona erdiği satırdan
sonraki satıra açıklama alt başlık koyabiliriz (caption).
Tablolar da HTML sayfasında olduğu gibi başlık (head) ve
gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi
<tbody> etiketleri arasına yazarız.
Tabloları biçimlendirmek için çeşitli parametreler ve CSS
kodları kullanılmaktadır. Bunlardan bazıları
border="..." : Kenarlık
ayarları için kullanılır
cellpading="..." : Hücre İçi
boşluk ayarları
cellspacing="..." :
Hücre dışı boşluk ayarları
align="..."
valign="..." : Hücre İçi hizalama ayarları
width="..." ,
height="..." : Hücre boyut ayarları
bgcolor="..." : Hücre arkaplan
renk ayarları
background="...": Hücre
arkaplan resim ayarları
colspan=".." : Sütun
birleştirme ayarları
rowspan="..": Satır birleştirme
ayarları
rules="..": Hücre kenarlık
görünürlüğü ayarları none : Tüm iç
kenarlıkları yok eder. rows : Dikey iç
kenarlıkları yok eder. cols : Yatay iç
kenarlıkları yok eder.
Renk İşlemleri
HTML de renklendirme işlemlerinde değer
verirken 3 farklı yöntem kullanabiliriz.
1) Renklerin ingilizce isimleri
<font color="Red" >
Kırmızı </font>
2) Renklerin Hexadecimal kodları
<font color="#FF0000" >
Kırmızı </font>
3) Renklerin RGB isimleri
<font color="rgb(255,0,0)"
> Kırmızı </font>
KODLAR
<html>
<head>
<title>Tablo İslemleri</title>
<meta charset="utf8"/>
<style>
#tbl3{
font-size:20px;
font-family:arial;
color:red;
background-color:#ffff00;
border-style:double solid dashed dotted;
border-width:10px 20px 5px 7px;
border-color:red purple orange #ffaabb;
border-radius:45px 50px 10px 80px;
transition:all 1s;
}
#tbl3:hover{
color:#ffff00;
background-color:#ff0000;
}
#tbl3 tr:hover{
background-color:blue;
transition:all 0.5s;
}
.hcr:hover{
background-color:white;
color:blue;
}
.hcr{
border-style:solid;
border-width:5px;
border-color:purple;
border-radius:100px;
}
td:active{
color:cyan;
background-image:url("yumruk_bayrak.jpg");
background-size:contain;
border-style:solid;
border-width:5px;
border-color:yellow;
border-radius:100px;
transition:all 1s;
}
</style>
</head>
<body>
<h1 style="color:RGBA(255,0,0,0.6);" align="center">Tablo İslemleri</h1>
<table rules="rows" bgcolor="yellow" background="doga.jpg" border="5px" align="left" cellpadding="10px" cellspacing="15px" height="400px" width="600px">
<thead align="right">Burası thead ile yazılan baslık</thead>
<caption align="bottom">Burası caption ile yazılan baslık</caption>
<colgroup>
<col span="1"/>
<col span="2" style="background-color:rgba(255,120,200,0.5);"/>
</colgroup>
<tr>
<th>Baslik 1</th>
<th>Baslik 2</th>
<th>Baslik 3</th>
</tr>
<tr bgcolor="cyan">
<td>Merhaba</td>
<td width="300px">1. Satır 2. Hücre</td>
<td >1. Satır 3. Hücre</td>
</tr>
<tr>
<td>2. Satır 1. Hücre</td>
<td background="yol_agac.jpg" align="right" valign="top">2. Satır 2. Hücre</td>
<td height="250px" valign="bottom">2. Satır 3. Hücre</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1 style="color:RGBA(255,0,0,0.6);" align="center">Tablo Birlestirmeleri</h1>
<h2>Sütun Birlestirme</h2>
<table border="2" align="center" cellpadding="10px">
<tr>
<td colspan="2">B</td><td>C</td><td>D</td>
</tr>
<tr>
<td>E</td><td colspan="3">G</td>
</tr>
<tr>
<td>H</td><td>I</td><td>İ</td><td>J</td>
</tr>
<tr>
<td colspan="4" align="center">K</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<h2>Satır Birlestirme</h2>
<table border="2" align="center" cellpadding="10px">
<tr>
<td rowspan="2">A</td><td colspan="2">C</td><td rowspan="8">N</td>
</tr>
<tr>
<td rowspan="3">L</td><td>G</td>
</tr>
<tr>
<td>H</td><td>İ</td>
</tr>
<tr>
<td>K</td><td>M</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<h2>Diğer İslemler</h2>
<table border="2" align="center" id="tbl3" cellpadding="10px">
<tr>
<td>A</td><td>B</td><td>C</td><td>D</td>
</tr>
<tr>
<td>E</td><td>F</td><td>G</td><td>Ğ</td>
</tr>
<tr>
<td>H</td><td>I</td><td class="hcr">İ</td><td>J</td>
</tr>
<tr>
<td>K</td><td>L</td><td class="hcr">M</td><td>N</td>
</tr>
</table>
</body>
</html>
bir sonraki dersimizde görüşmek üzere esen kalın...ebi
bir sonraki dersimizde görüşmek üzere esen kalın...ebi
yararlanılan kaynaklar:
Hiç yorum yok:
Yorum Gönder