CSS tablo oluşturma

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

Author: birdilbirinsan

Yıllar önce oğluma japonca öğretiyordum. Sonra kendi kendime..herkese özellikle çocuklara resimli olarak öğretebilirim düşüncesiyle başladım. O aralar annemi kaybettiğimde onun yemek defterini buldum ve pamuk elleriyle yaptığı yemek tariflerini denemeye başladım. Bu siteyi yapmaya başladığımda bir fiil özel bir şirkette çalışıyordum. Şimdi emekliyim. Daha fazla yemek tarifi deneyip videolarıyla paylaşmaya çalışacağım. Boş durmak olmaz..emekli oldum diye herşey bitmedi...üretmek lazım..yeni şeyler yapmak lazım. Umarım herkes için kullanışlı bir site yapmışımdır. Sitemdeki resimlerin..çizimlerin hepsi kendime aittir. Sevgiyle kalın...

Bir cevap yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.