Css html tablo yapımı
CSS tablo oluşturma
Css tablo oluşturma ‘yı nasıl öğrendim…? Uzun yıllardır bilgisayar ile uğraşıyorum. Bir bilgisayar uzmanı değilim ama okuyarak çözerek bilgisayar tamiri bile yapmışlığım vardır.
Yıllar önce sitelerde filmler yokken , torrent ile önce filmi indirirdim sonra alt yazısını , bulabilirsem ses dosyasını indirirdim ve sabaha kadar oturup o alt yazıyı ya da sesi filme bir program aracılığıyla yapıştırırdım.
Amaç ne …? eşimle film seyretmek…eee bütün filmi seyrediyordum bu işi yaparken..bir de oturup eşimle seyrediyordum.
Ama çok eğlenceli oluyordu…
Bilgisayar maceralarım böyle başladı…oğlum da okuldan kodlar getiriyor..kodları yazmak da çok zevkli…Şimdi de sitemde kullandığım basit CSS tabloları nasıl yaptığımı sizlerle paylaşmak istedim.
< = bu işaret ile başlıyor hikaye…
tablo yapmak için…
<table> Tablo başlangıcı </table> Kapanışı
<td> = sütun açmak için </td> böyle kapatılıyor.
<tr> = sıra açmak için kullanılıyor. </tr> Böyle de kapatılıyor.
Açtığınız ne olursa olsun kapatılması gerekiyor.
şimdi tek sütunlu tablo yapalım.
Sayfamızın metin bölümüne yapıştıracağınız ‘html kodu’
<table>
<tbody>
<tr>
<td>Merhaba 1.sütun</td>
</tr>
</tbody>
</table>
oluşan tablonun görünümü
Merhaba 1.sütun
Bu kadar basit…<td> içine yazılanlar sütunun içinde yer alıyor ,istediğiniz kadar çok şey koyabiliyorsunuz içine ve bittiğinde mutlaka </td> ile kapatmalısınız.
Şimdi de iki sütunlu tablo yapalım.
Sayfamızın metin bölümüne yapıştıracağınız ‘html kodu’
<table>
<tbody>
<tr>
<td>Merhaba 1.sütun</td>
<td>merhaba 2.sütun</td>
</tr>
</tbody>
</table>
oluşan tablonun görünümü
Merhaba 1.sütun
merhaba 2.sütun
Bu kodları bir yere kopyalayınca sürekli yazmak zorunda kalmıyorsunuz.
Şimdi de satır ekleyelim.(tek sütunlu-iki satırlı)
Daha önce de dediğim gibi satırı : <tr> yazarak açıyoruz. Nereye koyarsanız orada satır olur.
şimdi 2 satır , tek sütunlu tablo yapalım.
Sayfamızın metin bölümüne yapıştıracağınız ‘html kodu’
<table>
<tr>
<td>merhaba 1.satır, 1.sütun</td>
</tr>
<tr>
<td>merhaba 2.satır, 1.sütun</td>
</table>
oluşan tablonun görünümü
merhaba 1.satır, 1.sütun
merhaba 2.satır, 1.sütun
Tabloyu boyayalım.
<td bgcolor ekliyoruz.
Sayfamızın metin bölümüne yapıştıracağınız ‘html kodu’
<table>
<tbody>
<tr>
<td bgcolor=”#FFF8DC”>Merhaba 1.sütun</td>
</tr>
</tbody>
</table>
oluşan tablonun görünümü
Merhaba 1.sütun
Tabloyu responsive yapalım.
Tablolar ile ilgili basit kodlar bunlar…CSS tablo oluşturma ‘nın tabii ki daha çok içerikli kodları var ..sütun içersin de iki satır açmak gibi..
Bir de tabloyu cep telefonları için ‘responsive’ yapmak var. Bunun için tabloya aşağıdaki kodu ekliyoruz o zaman tabloda çok fazla sıra olsa da kendi içinde kayıyor.
Sayfamızın metin bölümüne yapıştıracağınız ‘html kodu’
<div class=’table-responsive’>
<table class=”table”>
<tr>
<td style=”width: 100%;”> </td>
</tr>
</table>
</div>
oluşan tablonun görünümü ( ekranın boyutunu küçültün cep telefonunda açın. ) tablonun kaydığını horizontal scroll göreceksiniz.
merhaba,merhaba merhaba,merhaba merhaba,merhaba merhaba,merhaba merhaba,merhaba merhaba,merhaba merhaba,merhaba merhaba,merhaba
